MudBlazor - Blazor Component Library

Basic Rating

<MudRating SelectedValue="2" />

Disabled

A disabled component cannot change its state. Use the Disabled parameter to disable a component.

<MudRating Disabled="true" SelectedValue="2" />

Read only

A read-only component doesn't allow interactions. Use the ReadOnly parameter to mark a component as read-only.

<MudRating ReadOnly="true" SelectedValue="2" />

Sizes

<div class="d-flex flex-column align-center">
    <MudRating SelectedValue="2" Size="Size.Small" />
    <MudRating SelectedValue="2" Size="Size.Medium" />
    <MudRating SelectedValue="2" Size="Size.Large" />
</div>

Max value

<div class="d-flex flex-column align-center">
    <MudRating SelectedValue="1" MaxValue="3" />
    <MudRating SelectedValue="2" />
    <MudRating SelectedValue="3" MaxValue="10" />
</div>

Icons and color

Icons and colors can be set separately for Empty and Full icons. Icons can be set using FullIcon and EmptyIcon properties, while Color can be set using Color attribute for both icons, or separately for full/empty icons using FullIconColor and EmptyIconColor properties. If one of those is not set, the component will use the value set in Color property for both empty and full.

<div class="d-flex flex-column align-center">
    <MudRating SelectedValue="2" FullIcon="@Icons.Material.Filled.Visibility" EmptyIcon="@Icons.Material.Filled.VisibilityOff" />
    <MudRating SelectedValue="2" FullIcon="@Icons.Material.Filled.Favorite" EmptyIcon="@Icons.Material.Filled.FavoriteBorder" Color="Color.Secondary" />
    <MudRating SelectedValue="2" FullIcon="@Icons.Material.Filled.Square" EmptyIcon="@Icons.Material.Filled.Square" FullIconColor="Color.Primary" EmptyIconColor="Color.Tertiary" />
</div>

Events and value binding

The MudRating component provides value binding and events for changed selected value or hover. E.g you can display a label on hover to help users pick the correct rating value, using parameters like HoveredValueChanged, SelectedValueChanged and bind-SelectedValue.

<div class="d-flex flex-column align-center">
    <MudRating @bind-SelectedValue="selectedVal" HoveredValueChanged="HandleHoveredValueChanged" />
    <MudText Typo="Typo.subtitle2" Class="deep-purple-text mt-2">@LabelText</MudText>
</div>

@code {
    private int selectedVal = 0;
    private int? activeVal;

    private void HandleHoveredValueChanged(int? val) => activeVal = val;

    private string LabelText => (activeVal ?? selectedVal) switch
    {
        1 => "Very bad",
        2 => "Bad",
        3 => "Sufficient",
        4 => "Good",
        5 => "Awesome!",
        _ => "Rate our product!"
    };
}

Keyboard Navigation

MudRating accepts keys to keyboard navigation.

ArrowLeft key to decrease value by 1

ArrowRight key to increase value by 1

Shift+ArrowLeft key to set value 0

Shift+ArrowRight key to increase value to max

*Disabled or readonly ratings' value cannot be changed by keys.

<div class="d-flex flex-column align-center">
    <MudRating SelectedValue="2" />
    <MudRating SelectedValue="3" MaxValue="10" />
</div>