@progress/kendo-react-inputs
Advanced tools
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
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 must install a license key file, whether you are on a paid license or a 30-day free trial. To receive a license key, either purchase a license or start 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 i @progress/kendo-react-inputs
What's in this package (ToC):
Additional information:
Among the many features which the KendoReact Inputs deliver are:
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:
High-level component overview pages
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.
FAQs
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
The npm package @progress/kendo-react-inputs receives a total of 87,046 weekly downloads. As such, @progress/kendo-react-inputs popularity was classified as popular.
We found that @progress/kendo-react-inputs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.