Kendo UI for Vue Rating Overview
The Kendo UI for Vue 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—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
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 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.
