Kendo UI for Vue Rating Overview
The Kendo UI for Vue Native Rating component enables the user to increase, decrease, and select predefined values by clicking it's icons along or using the arrow keys.
The Kendo UI for Vue Rating component is part of the Kendo UI for Vue library. It is distributed through NPM under the kendo-vue-inputs NPM package.
The following example demonstrates the Rating in action.
Example
View Source
Change Theme:
The Rating component is part of the Kendo UI for Vue 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 Kendo UI for Vue 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—Render a disabled Rating and keep it disabled until your requirements are fulfilled.
- Controlled mode—Take advantage of the built-in options that allow you to control the value of the Rating.
- Forms Support—You can effortlessly integrate the Rating with an HTML5 form, a
Kendo UI for Vue Form, or a third-party Vue form library. - Rating Item customization—You can use the RatingItem component to customize the appearance of the Rating or to transform the RatingItem children.
- Keyboard navigation—The Rating supports many 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.
