Important
- This package is а part of KendoReact—a commercial UI library.
- You will need to install a license key when adding the package to your project. For more information, please refer to the KendoReact My License page.
- To receive a license key, you need to either purchase a license or register for a free trial. Doing so indicates that you accept the KendoReact License Agreement.
- The 30-day free trial gives you access to all the KendoReact components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the KendoReact dev team!
Start using KendoReact and speed up your development process!
The React Inputs, part of KendoReact, offer a highly customizable interface for users to enter and pick different information. The KendoReact Inputs support different locales and formats.
What's in this package (ToC):
-
KendoReact Inputs Library for React
- React Checkbox Component
- React ColorGradient Component
- React ColorPalette Component
- React ColorPicker Component
- React Input Component
- React MaskedTextBox Component
- React NumericTextBox Component
- React RadioButton Component
- React RadioButtonGroup Component
- React RangeSlider Component
- React Slider Component
- React Switch Component
- React TextArea Component
- React Inputs Components Library Features
- Support Options
- Resources
The KendoReact Checkbox component moves beyond the traditional HTML input element and provides styling that fits with all KendoReact themes, allowing users to maintain a consistent look and feel throughout their entire React application.
The KendoReact ColorGradient component provides a beautiful and easy to use user interface for choosing a gradient color. In some cases, the opacity of the gradient is not required, and we can remove the opacity input to make the component more compact.
The KendoReact ColorPalette component can render all colors and color presets, making it ideal when we have to present the user with all available color options. Rendering a specific color preset is available out of the box. This can save time and code by enabling developers to set just the name of the color preset instead of setting each color individually.
The KendoReact ColorPicker component provides users with an intuitive way of selecting and submitting color values. The KendoReact ColorPicker allows users to pick colors from either a color gradient, which provides an interactive way to select a color by dragging a pointer around a gradient, or a color palette which contains predefined colors in a palette. Primarily serving accessibility enablement the KendoReact ColorPicker will display the current contrast ratio and indicate whether the contrast color is compliant with an AA or AAA contrast ratio.
- View Types—The KendoReact ColorPicker allows users to pick colors from either a color gradient, which provides an interactive way to select a color by dragging a pointer around a gradient, or a color palette which contains predefined colors in a palette.
- Contrast Color Tool—Primarily serving accessibility enablement the KendoReact ColorPicker will display the current contrast ratio and indicate whether the contrast color is compliant with an AA or AAA contrast ratio.
The React Input component builds on top of a traditional HTML input element and provides additional KendoReact styling to fit with all KendoReact themes, as well as the ability to provide a label as a floating label.
The KendoReact MaskedTextBox component provide built-in masks to not only indicate to the user what kind of format is expected, but can also enforce this mask as the user is inserting data, then validate data when a form is submitted. The React MaskedTextBox supports a set of built-in masks like requiring digits, letters or special symbols and characters, but custom rules can be applied as well.
The KendoReact NumericTextBox component lets users edit and submit only numeric values by typing in the component’s input area, or by using the provided spin buttons to change the value. The React NumericTextBox increases or decreases its numerical value by a predefined step or default to one. The KendoReact NumericTextBox features a set of spin buttons, allowing users to increase or decrease the numeric value by clicking on the provided up or down arrows.
The KendoReact RadioButton component allows developers to style React RadioButtons to fit the existing KendoReact theme and have a uniform look and feel throughout their entire application.
The KendoReact RadioButtonGroup is a component that is used when two or more options need to be available from a RadioButton. Toggling between horizontal and vertical layouts for the KendoReact RadioButtonGroup component can be done by interacting with a single property.
The KendoReact RangeSlider component enables end-users to increase, decrease and select a predefined range of values by dragging left and right handles along a track. The React RangeSlider component has a single configuration option to help set the orientation to either vertical or horizontal orientations.
The KendoReact Slider component provides a sleek and intuitive UI interface for increasing, decreasing and selecting predefined values by dragging a handle along a track, or selecting a value by utilizing the provided side arrow buttons. Out of the box, the KendoReact Slider can render itself in both horizontal or vertical modes. Switching between the two is as simple as updating a single configuration option.
Popularized by iOS, Android, and other mobile operating systems, the KendoReact Switch component lets users toggle between two values: often checked and unchecked states.
The KendoReact TextArea component is suitable for any scenario that requires multiple lines of text. The TextArea (also known as Multi-line TextBox) component comes with a built-in character counter, which gives end-users a real-time indication of the number of characters currently typed. The dimensions of the React TextArea component can be defined in multiple ways. This includes setting the initial height of the TextArea component and controlling if the component should automatically resize based on the content entered by the user.
Among the many features which the KendoReact Inputs deliver are:
- Labels—To make implementing the KendoReact Inputs as easy as possible, the React UI component comes with a built-in Label property, which can be placed before or after the actual element. For scenarios where the built-in label is not suitable, a custom label can be easily applied.
- Setting the default value—Easily configure the initial value that the Inputs render.
- Form validation—Validate input values, set validation requirements (such as minimum and maximum) and prevent the submission of forms which are in an invalid state.
- Formats and placeholders—Control the placeholders for the input field, including custom formats.
- Controlled state—Control the value Inputs.
- Accessibility support—The Inputs are compliant with WAI-ARIA and Section 508.
- Theme support—The KendoReact Inputs, as well as all 100+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.
For any issues you might encounter while working with the KendoReact Inputs, use any of the available support channels:
- Industry-leading technical support—KendoReact paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the dedicated KendoReact support system.
- Product forums—The KendoReact forums are part of the free support you can get from the community and from the KendoReact team.
- Feedback portal—The KendoReact feedback portal is where you can request and vote for new features to be added.
- Getting Started with KendoReact
- Getting Started with the KendoReact Inputs
- API Reference of the KendoReact Inputs
- KendoReact Roadmap
- Blogs
- Demos, documentation, and component reference
- KendoReact pricing and licensing
- Changelog
High-level component overview pages
- React Checkbox Component
- React ColorGradient Component
- React ColorPalette Component
- React ColorPicker Component
- React FlatColorPicker Component
- React Input Component
- React MaskedTextBox Component
- React NumericTextBox Component
- React RadioButton Component
- React RadioButtonGroup Component
- React RangeSlider Component
- React Rating Component
- React Signature Component
- React Slider Component
- React Switch Component
- React TextArea Component
Copyright © 2024 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.