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.
Start Free TrialCreating Blazor Rating
- Add the
<TelerikRating>
tag to a Razor file. - Set the
Value
parameter to a double. It supports one-way and two-way binding. - (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