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.

ninja-iconThe 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.Start 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.

ParameterTypeDescription
AriaLabelstringThe aria-label attribute of the <span class="telerik-blazor k-rating"> element that represents the Rating component.
AriaLabelledBystringThe aria-labelledby attribute of the <span class="telerik-blazor k-rating"> element that represents the Rating component.
ClassstringThe class attribute of the <span class="telerik-blazor k-rating"> element. Use it to apply custom styles or override the theme.
Enabledbool
(true)
Defines if the Rating allows selection.
HoverThrottleIntervalintDetermines the delay between hovering and applying the hover value to the component.
LabelstringIf set, renders an additional HTML element next to the rating with arbitrary content.
Maxint
(5)
Defines the number of items (icons).
PrecisionModeRatingPrecisionMode
(Full)
Controls the precision mode of the component selection.
ReadOnlybool
(false)
Defines whether the component should be rendered in a read-only state.
SelectionModeRatingSelectionMode
(Continuous)
Controls the selection mode of the component.

Next Steps

See Also