Selection in Blazor Rating

14 Aug 20262 minutes to read

The Blazor Rating component lets users choose a value using a visual scale. Selection can be changed by clicking or tapping the icons, or programmatically. The key options are the current value, minimum value, single-selection behavior, and an optional reset button.

Properties overview

Property	Type	Default	Description
Value	double	0	Current rating value. Supports two-way binding.
Min	double	0	Lowest selectable value.
EnableSingleSelection	bool	false	Visually highlights only the chosen item.
AllowReset	bool	false	Displays a reset button that clears the rating to Min.

@using Syncfusion.Blazor.Inputs

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

Selected value

Use the Value property to get or set the currently selected rating. The default value is 0. The value is a double and can be updated with two-way binding or by setting it programmatically. The selected value determines which items are rendered as selected, and the rendered value snaps to the configured Precision step and respects Min and ItemsCount.

@using Syncfusion.Blazor.Inputs

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

Min value

Use the Min property to set the lowest selectable rating. The default value is 0. For example, if Min is 2, selecting a value lower than 2 is not permitted. If the current Value is below Min, it snaps to the minimum on the next render.

@using Syncfusion.Blazor.Inputs

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

Single selection

Use the EnableSingleSelection property to visually highlight only the chosen item at a time. The default value is false. When set to true, only the chosen item appears selected while the others appear unselected. The Value still reflects the rating value of the selected item, snapped to the configured Precision step.

@using Syncfusion.Blazor.Inputs

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

Show or hide reset button

Use the AllowReset property to display a reset button. When AllowReset is true, a reset control appears that resets the rating to the Min value. By default, AllowReset is false.

@using Syncfusion.Blazor.Inputs

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