Rating

Rating Overview

The Rating component is a user interface element that allows users to provide feedback and express their satisfaction by assigning a numerical score within a predefined range. It is often used in applications, websites, and forms to collect user opinions and ratings for various content, products, or services. The Rating component displays a range of selectable items, such as stars or other icons, that users can click or tap to indicate their level of satisfaction. This component helps developers and businesses collect valuable user feedback, enabling them to improve their offerings and tailor their services to the user's preferences.

Live Demo

Appearance

The Rating component provides built-in styling options that grant visually appealing and flexible rendering experience.

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI Rating items can acquire various states that you can set by using the following classes:

• A Rating item in its normal state appears usable and clickable.
• k-hover—The hover state of the Rating item is triggered when the user moves the cursor over it. This state indicates that the element is interactive and the user can select it.
• k-selected—The selected state of the Rating item is activated after the user has interacted with the component.
• read-only—The read-only state of the Rating where the score is displayed, but users cannot interact with it.
• k-disabled—The disabled state of the Rating indicates that the user cannot interact with the component. When disabled, the component has no interactive behavior, it is faded out and slightly out of focus, which helps the user to distinguish it from the active elements on the page.

Anatomy

The anatomy of the Rating summarizes the visual and functional elements of the component. The main elements include a Rating container with selectable items and a Rating label for displaying the numerical score. As a part of a Form component, you can add a label and a hint text to the Rating.

The next image shows the anatomy of a Rating and includes the following elements:

1. Label (optional, used only in the Form component)
2. Rating container
3. Rating item - selected
4. Rating item - half selected
5. Rating item
6. Rating label

Variants

Depending on the elements they display, the Telerik and Kendo UI Rating components can be any of the following types:

• Rating with items only
• Rating with items and rating label

1. Rating with items only
2. Rating with items and rating label

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for jQuery RatingFind more information about the Kendo UI for jQuery Rating in the official product documentation of the component.

KendoReact RatingFind more information about the KendoReact Rating in the official product documentation of the component.

Telerik UI for ASP.NET Core RatingFind more information about the Telerik UI for ASP.NET Core Rating component.

Telerik UI for ASP.NET MVC RatingFind more information about the Telerik UI for ASP.NET MVC Rating component.