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

  • SelectionThe Rating allows you to configure it for continuous or single selection mode.
  • PrecisionYou can configure the Rating and allow it to render half-full items.
  • LabelThe Rating allows you to use a custom string as a label.
  • IconThe Rating allows you to change the default icon.
  • ReadonlyYou can override the default active state of the Rating.
  • DisabledYou can render a disabled Rating and keep it disabled until certain requirements are met.
  • Controlled modeTake advantage of the built-in options that allow you to control the value of the Rating.
  • Forms SupportYou can easily integrate the Rating with an HTML5 form, a KendoReact Form, or a third-party React form library.
  • Rating Item customizationYou can use the RatingItem component to customize the appearance of the Rating or to completely transform the RatingItem children.
  • Keyboard navigationThe Rating supports numerous keyboard shortcuts that allow users to interact with the component.
  • AccessibilityThe Rating component is accessible for screen readers and provides full WAI-ARIA support.

In this article

Not finding the help you need?