MudBlazor - Blazor Component Library

Single selection

Chipset will maintain a selection of chips for you. By default, you get a single selection. Setting Mandatory="true" will not allow to unselect the selected chip.

Primary

Secondary

Info

Success

Warning

Error

Dark

Nothing selected.

Mandatory

<MudChipSet T="Color" @bind-SelectedValue="_selected" CheckMark Mandatory="@_mandatory">
    <MudChip Text="purple" Color="Color.Primary" Value="@Color.Primary">Primary</MudChip>
    <MudChip Text="pink" Color="Color.Secondary" Value="@Color.Secondary">Secondary</MudChip>
    <MudChip Text="blue" Color="Color.Info" Value="@Color.Info">Info</MudChip>
    <MudChip Text="green" Color="Color.Success" Value="@Color.Success">Success</MudChip>
    <MudChip Text="orange" Color="Color.Warning" Value="@Color.Warning">Warning</MudChip>
    <MudChip Text="red" Color="Color.Error" Value="@Color.Error">Error</MudChip>
    <MudChip Text="black" Color="Color.Dark" Value="@Color.Dark">Dark</MudChip>
</MudChipSet>

<div class="d-flex flex-column align-center">
    @if (_selected != default)
    {
        <MudText>You selected the <MudText Color="@_selected" Inline>@_selected.ToDescriptionString()</MudText> chip.</MudText>
    }
    else {
        <MudText>Nothing selected.</MudText>
    }
    <MudCheckBox @bind-Value="_mandatory">Mandatory</MudCheckBox>
</div>

@code
{
    private bool _mandatory = true;
    private Color _selected;
}

Multiselection

When MultiSelection="true" ChipSet will maintain a selection of multiple chips. Setting CheckMark="true" the selected chips will also display a check mark.

Milk

Eggs

Soap

Corn flakes

Salad

Apples

Red wine

Nothing selected.

Check marks

<MudChipSet @bind-SelectedValues="_selected" MultiSelection CheckMark="_checkMark" Variant="Variant.Text" Color="Color.Info">
    <MudChip Value="@("Milk")" />
    <MudChip Value="@("Eggs")" />
    <MudChip Value="@("Soap")" />
    <MudChip Value="@("Corn flakes")" />
    <MudChip Value="@("Salad")" />
    <MudChip Value="@("Apples")" />
    <MudChip Value="@("Red wine")" />
</MudChipSet>

<div class="d-flex flex-column align-center">
    @if (_selected is { Count: > 0 }) {
        <MudText>You selected @string.Join(", ", _selected.OrderBy(x => x))</MudText>
    }
    else {
        <MudText>Nothing selected.</MudText>
    }
    <MudCheckBox @bind-Value="_checkMark">Check marks</MudCheckBox>
</div>

@code
{
    private bool _checkMark = true;
    private IReadOnlyCollection<string> _selected;
}

Adding and removing chips

<MudChipSet T="string" AllClosable OnClose="Closed">
    @foreach (var value in _values)
    {
        <MudChip T="string" Text="@value"></MudChip>
    }
</MudChipSet>

<div class="d-flex flex-column align-center">
        <MudButton StartIcon="@Icons.Material.Filled.Add" OnClick="Add">Add chip</MudButton>
</div>

@code
{
    private int _i = 1;
    private List<string> _values = new();
    public void Add() => _values.Add("Value " + (_i++));
    public void Closed(MudChip<string> chip) => _values.Remove(chip.Text);
}

Chip Set

API

Single selection

Multiselection

Adding and removing chips