MudBlazor

Rating

Ratings provide insight regarding other's opinions and experiences with a product. Collecting user feedback via ratings is a simple analytic that can provide a lot of feedback to your product or application.

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

<MudGrid Spacing="1" Class="d-flex flex-column">
        <MudItem>
            <MudRating SelectedValue="2" Size="Size.Small" />
        </MudItem>
        <MudItem>
            <MudRating SelectedValue="2" Size="Size.Medium" />
        </MudItem>
        <MudItem>
            <MudRating SelectedValue="2" Size="Size.Large" />
        </MudItem>
    </MudGrid>

Max value

<MudGrid Spacing="1" Class="d-flex flex-column">
        <MudItem>
            <MudRating SelectedValue="1" MaxValue="3" />
        </MudItem>
        <MudItem>
            <MudRating SelectedValue="2" />
        </MudItem>
        <MudItem>
            <MudRating SelectedValue="3" MaxValue="10" />
        </MudItem>
    </MudGrid>

Icons and color

<MudGrid Spacing="1" Class="d-flex flex-column">
        <MudItem>
            <MudRating SelectedValue="2" FullIcon="@Icons.Material.Filled.Visibility" EmptyIcon="@Icons.Material.Filled.VisibilityOff" />
        </MudItem>
        <MudItem>
            <MudRating SelectedValue="2" FullIcon="@Icons.Material.Filled.Favorite" EmptyIcon="@Icons.Material.Filled.FavoriteBorder" Color="Color.Secondary" />
        </MudItem>
    </MudGrid>

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.

Rate our product!
<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!"
    };
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙