KendoReact Rating Overview
The KendoReact Rating component enables the user to increase, decrease, and select predefined values by clicking it's icons along or using the arrow keys.
The KendoReact Rating component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-inputs NPM package.
The following example demonstrates the Rating in action.
Example
View Source
Edit In Stackblitz
Change Theme:
The Rating component is part of the KendoReact Inputs component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the Rating and the rest of the components in the package, see the Getting Started with the KendoReact Inputs guide.
Key Features
- Selection—The Rating allows you to configure it for continuous or single selection mode.
- Precision—You can configure the Rating and allow it to render half-full items.
- Label—The Rating allows you to use a custom string as a label.
- Icon—The Rating allows you to change the default icon.
- Readonly—You can override the default active state of the Rating.
- Disabled—You can render a disabled Rating and keep it disabled until certain requirements are met.
- Controlled mode—Take advantage of the built-in options that allow you to control the value of the Rating.
- Forms Support—You can easily integrate the Rating with an HTML5 form, a KendoReact Form, or a third-party React form library.
- Rating Item customization—You can use the RatingItem component to customize the appearance of the Rating or to completely transform the RatingItem children.
- Keyboard navigation—The Rating supports numerous keyboard shortcuts that allow users to interact with the component.
- Accessibility—The Rating component is accessible for screen readers and provides full WAI-ARIA support.
