Blazor Rating Overview

The Blazor Rating is a component that allows you to intuitively rate by selecting number of items stars from a predefined number of items.

The Rating component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor Rating

1. Add the <TelerikRating> tag to a Razor file.
2. Set the Value parameter to a double. It supports one-way and two-way binding.
3. (optional) Set the Label parameter.

Basic configuration of the Blazor Rating

<TelerikRating @bind-Value="@Value"
               Label="@Label">
</TelerikRating>

@code {
    private double Value { get; set; } = 1;
    private string Label => $"{Value} / 5";
}

Selection

You can choose between Continuous and Single selection. The behavior depends on the SelectionMode parameter value. Read more about the selection options of the Rating...

Precision

You can choose between Full and Half precision. The behavior depends on the PrecisionMode parameter value. Read more about the selection precision options of the Rating...

Label

You can set a label with the Label parameter value. Read more about the label of the Rating...

Templates

You can use templates to customize the rendering and appearance of the component. Read more about the templates of the Rating...

Events

The Rating events allow you to implement custom functionality and handle user interactions with the component. Read more about the events of the Rating...

Rating Parameters

The Blazor Rating provides various parameters that allow you to configure the component. Also check the Rating API Reference for a full list of properties.

Parameter	Type	Description
AriaLabel	string	The aria-label attribute of the <span class="telerik-blazor k-rating"> element that represents the Rating component.
AriaLabelledBy	string	The aria-labelledby attribute of the <span class="telerik-blazor k-rating"> element that represents the Rating component.
Class	string	The class attribute of the <span class="telerik-blazor k-rating"> element. Use it to apply custom styles or override the theme.
Enabled	bool (true)	Defines if the Rating allows selection.
HoverThrottleInterval	int	Determines the delay between hovering and applying the hover value to the component.
Label	string	If set, renders an additional HTML element next to the rating with arbitrary content.
Max	int (5)	Defines the number of items (icons).
PrecisionMode	RatingPrecisionMode (Full)	Controls the precision mode of the component selection.
ReadOnly	bool (false)	Defines whether the component should be rendered in a read-only state.
SelectionMode	RatingSelectionMode (Continuous)	Controls the selection mode of the component.

Next Steps

• Explore the Rating Selection Options
• Explore the Rating Precision Options
• Customize the Rating Appearance

See Also

• Live Rating Demos
• Rating API Reference