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

<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" />
</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>

Rating

API