Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Rating

Ratings provide insight regarding others’ 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.

See Rating API for parameter documentation.

Basic Rating

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudRating SelectedValue="2" />

Disabled

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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudRating ReadOnly="true" SelectedValue="2" />

Sizes

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 bind-SelectedValue

Rate our product!
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 🗙