Important
- This package is а part of KendoReact—an enterprise-grade UI library with 120+ free and premium components.
- It contains both free and premium KendoReact components and tools. To use the premium components, you will need to purchase a license or register for a free trial. You can use the free components without having to sign up or get a license key.
- If you're looking for free React components, check out Get Started with KendoReact Free.
- If you have an active license, visit the KendoReact My License page to learn how to configure your KendoReact licensing.
- Installing and working with this package indicates that you accept the KendoReact License Agreement.
- The 30-day free trial gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use 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.
How to start:
npm install --save @progress/kendo-react-inputs @progress/kendo-drawing @progress/kendo-inputs-common @progress/kendo-licensing @progress/kendo-react-animation @progress/kendo-react-buttons @progress/kendo-react-common @progress/kendo-react-dialogs @progress/kendo-react-intl @progress/kendo-react-labels @progress/kendo-react-popup @progress/kendo-svg-iconsWhat's in this package (ToC):
- React Inputs Components Library Features
- React Checkbox Component (free)
- React ColorGradient Component (premium)
- React ColorPalette Component (free)
- React ColorPicker Component (premium)
- React FlatColorPicker Component (premium)
- React Input Component (free)
- React MaskedTextBox Component (free)
- React NumericTextBox Component (free)
- React RadioButton Component (free)
- React RadioGroup Component (free)
- React RangeSlider Component (premium)
- React Rating Component (free)
- React Signature Component (premium)
- React Slider Component (free)
- React Switch Component (free)
- React TextArea Component (free)
- React TextBox Component (free)
Additional information:
Among the many features which the KendoReact Inputs deliver are:
- Labels—To make implementing the KendoReact Inputs as easy as possible, the React UI components come 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.
- Unstyled mode—The KendoReact Inputs support an unstyled mode, offering complete control over the popup appearance.
This is a free React component—no sign-up or license required.
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.
How to use the Checkbox component in your apps:
import { Checkbox } from '@progress/kendo-react-inputs';
...
<Checkbox label="Checkbox label" />This is a KendoReact premium component and requires a commercial license or an active trial license.
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 you can remove the opacity input to make the component more compact.
How to use the ColorGradient component in your apps:
import { ColorGradient } from '@progress/kendo-react-inputs';
...
<ColorGradient />This is a free React component—no sign-up or license required.
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.
How to use the ColorPalette component in your apps:
import { ColorPalette } from '@progress/kendo-react-inputs';
...
<ColorPalette palette="basic" />This is a KendoReact premium component and requires a commercial license or an active trial license.
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.
How to use the ColorPicker component in your apps:
import { ColorPicker } from '@progress/kendo-react-inputs';
...
<ColorPicker views={['gradient', 'palette']} /> // Shows both views of the ColorPicker and end users can switch between the two.This is a KendoReact premium component and requires a commercial license or an active trial license.
The KendoReact FlatColorPicker component adds another option for your users to select colors in React applications. It provides a flat view for the React ColorGradient and the React ColorPalette components and adds a header and footer. Unlike the React ColorPicker component, the React FlatColorPicker is not rendered within a popup or dropdown but immediately to the page.
How to use the FlatColorPicker component in your apps:
import { FlatColorPicker } from '@progress/kendo-react-inputs';
...
<FlatColorPicker views={['gradient', 'palette']} /> // Shows both views of the FlatColorPicker and end users can switch between the two.This is a free React component—no sign-up or license required.
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.
How to use the Input component in your apps:
import { Input } from '@progress/kendo-react-inputs';
...
<Input label={'Floating label for the input field'}/>This is a free React component—no sign-up or license required.
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.
How to use the MaskedTextBox component in your apps:
import { MaskedTextBox } from '@progress/kendo-react-inputs';
...
<MaskedTextBox
mask="(999) 000-00-00-00" // Sets a phone number mask with a country prefix.
/>This is a free React component—no sign-up or license required.
The KendoReact NumericTextBox component allows end users to input or adjust numeric values via typing or spin buttons.
How to use the NumericTextBox component in your apps:
import { NumericTextBox } from '@progress/kendo-react-inputs';
...
<NumericTextBox />This is a free React component—no sign-up or license required.
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.
How to use the RadioButton component in your apps:
import { RadioButton } from '@progress/kendo-react-inputs';
...
<RadioButton label="RadioButton Label" />This is a free React component—no sign-up or license required.
The KendoReact RadioGroup 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 RadionGroup component can be done by interacting with a single property.
How to use the RadioGroup component in your apps:
import { RadioGroup } from '@progress/kendo-react-inputs';
...
/**
* Provide an array of items for the radio buttons within the group.
*/
<RadioGroup data={data} />This is a KendoReact premium component and requires a commercial license or an active trial license.
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.
How to use the RadioGroup component in your apps:
import { RangeSlider, SliderLabel } from '@progress/kendo-react-inputs';
...
<RangeSlider
defaultValue={{ start: 30, end: 70 }}
step={1}
min={0}
max={100}
>
{[0, 25, 50, 75, 100].map((perc, i) => (
<SliderLabel
key={i}
position={perc}
>
{perc.toString()}
</SliderLabel>
))}
</RangeSlider>This is a free React component—no sign-up or license required.
The KendoReact Rating component lets end users provide visual ratings in React apps. The component supports partial ratings (for example, 4.5 stars) and integrates with other UI components like the KendoReact Data Grid.
How to use the Rating component in your apps:
import { Rating } from '@progress/kendo-react-inputs';
...
<Rating />This is a KendoReact premium component and requires a commercial license or an active trial license.
The KendoReact Signature component captures handwritten signatures via mouse or touch and submits them in forms, making it ideal for signing documents like financial forms or receipts.
How to use the Signature component in your apps:
import { Signature } from '@progress/kendo-react-inputs';
...
<Signature />This is a free React component—no sign-up or license required.
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.
How to use the Slider component in your apps:
import { Slider } from '@progress/kendo-react-inputs';
...
<Slider
step={1}
min={1}
max={10}
>Popularized by iOS, Android, and other mobile operating systems, the KendoReact Switch component lets users toggle between two values: often checked and unchecked states.
How to use the Slider component in your apps:
import { Switch } from '@progress/kendo-react-inputs';
...
<Switch />This is a free React component—no sign-up or license required.
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.
How to use the TextArea component in your apps:
import { TextArea } from '@progress/kendo-react-inputs';
...
<TextArea />This is a free React component—no sign-up or license required.
The KendoReact TextBox component is a versatile and more refined alternative to the Input, providing multiple additional props.
How to use the TextBox component in your apps:
import { TextBox } from '@progress/kendo-react-inputs';
...
<TextBox />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
- Get Started with KendoReact Free
- 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 RadioGroup Component
- React RangeSlider Component
- React Rating Component
- React Signature Component
- React Slider Component
- React Switch Component
- React TextArea Component
Copyright © 2025 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.