Selection in Blazor Rating Component

12 Jan 20231 minute to read

The Blazor Rating component allows users to rate something using a visual scale, and the selection state can be changed by the user clicking or tapping on the stars in the rating scale or through code. The Rating component has a minimum value and a reset button, and provides customization options for the selected rating value and selection behavior.

@using Syncfusion.Blazor.Inputs

<SfRating Value="3"></SfRating>

Selected value

You can use the Value property of the Blazor Rating component to determine the currently selected rating value and update it using two-way binding or by setting the value programmatically. The current rating value can also be used to identify the selected items.

@using Syncfusion.Blazor.Inputs

<SfRating @bind-Value=value></SfRating>
<br/>
Rated Value : @value
@code{
    double value= 3;    
}

Min value

You can use the Min property of the Blazor Rating component to set the minimum possible rating value the user can select. If you set the Min property to 2, then you will not be able to select a rating lower than 2.

@using Syncfusion.Blazor.Inputs

<SfRating Min="2"></SfRating>

Single selection

You can use the EnableSingleSelection property of the Blazor Rating component to select only one item at a time. When the EnableSingleSelection property is set to true, only the selected item will be considered to be in the selected state, while all other items will be unselected.

@using Syncfusion.Blazor.Inputs

<SfRating Value="3" EnableSingleSelection=true></SfRating>

Show or hide reset button

You can reset the rating value to its default by using the AllowReset property of the Blazor Rating component. When the AllowReset property is set to true, a reset button will be shown that allows the user to reset the rating value to its default.

@using Syncfusion.Blazor.Inputs

<SfRating Value="3" AllowReset=true></SfRating>