Blazorise Rating component

Ratings provide insight regarding others opinions and experiences with a product.

Rating component can be used to allow the users to share their opinion about the product, documentation page, photo and more.

Examples

Basic

To start with a basic example just define the rating color.

<Rating Color="Color.Primary" />

Two-way binding

Binding the selected value to a variable will make it more usable.

<Rating Color="Color.Primary" @bind-SelectedValue="@SelectedValue" MaxValue="10" />

@code{
    int SelectedValue = 7;
}

Show Tooltips

By defining the GetTooltip callback you can show the extra information to the user.

Along with the tooltip Text, it is also possible to control tooltip arrow visibility, multiline mode, and placement.

<Rating Color="Color.Primary" @bind-SelectedValue="@SelectedValue" MaxValue="10" GetTooltip="@GetTooltip" />

@code {
    int SelectedValue = 7;

    RatingTooltip GetTooltip( int value )
    {
        if ( value <= 2 )
            return new RatingTooltip( "Very bad" );
        else if ( value <= 4 )
            return new RatingTooltip( "Bad", TooltipPlacement.Bottom );
        else if ( value <= 6 )
            return new RatingTooltip( "Fair" );
        else if ( value <= 8 )
            return new RatingTooltip( "Good", TooltipPlacement.Top, false, false );
        else if ( value <= 10 )
            return new RatingTooltip( "Very good" );

        return null;
    }
}

Best Practices

Explain the Scale

Explain what the lowest and highest values mean so users interpret the scale consistently. Provide a visible or accessible label and expose the current value as text instead of relying on icons alone. When the workflow permits it, let users change or clear an accidental rating.

Explicit Choices

A rating is intentionally compact and approximate. Use a labeled choice group when each value has a distinct meaning or when the response has legal, financial, or operational consequences.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<Rating />