MudBlazor - Blazor Component Library

Single selection

Chipset will maintain a selection of chips for you. By default, the SelectionMode is SelectionMode.SingleSelection. In this mode you can choose a single value. Similar to a radio button you can switch the value by clicking on a different chip but it is not possible to unselect the selected choice by clicking a second time. SelectionMode="SelectionMode.ToggleSelection" is a single selection which also allows to unselect the selected chip. To get or set the selected value use @bind-SelectedValue.

Note: If you use the toggle selection and unselect the selected item the SelectedValue will become default(T). If that collides with a valid choice (i.e. 0 for type int) you should use a nullable type (i.e. T="int?").

Primary

Secondary

Info

Success

Warning

Error

Dark

Nothing selected.

SingleSelection ToggleSelection

<MudChipSet T="Color" @bind-SelectedValue="SelectedColor" CheckMark SelectionMode="@SelectionMode">
    <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 (SelectedColor != default) {
        <MudText>You selected the <MudText Color="@SelectedColor" Inline>@SelectedColor.ToDescriptionString()</MudText> chip.</MudText>
    }
    else {
        <MudText>Nothing selected.</MudText>
    }
    <MudRadioGroup @bind-Value="SelectionMode">
        <MudRadio Value="@SelectionMode.SingleSelection" Color="Color.Primary">SingleSelection</MudRadio>
        <MudRadio Value="@SelectionMode.ToggleSelection" Color="Color.Primary">ToggleSelection</MudRadio>
    </MudRadioGroup>
</div>

@code
{
    public SelectionMode SelectionMode = SelectionMode.SingleSelection;
    public Color SelectedColor;
}

Multiselection

When you set SelectionMode="MultiSelection" the chip set will maintain a selection of multiple values. To utilize or manipulate the selection use @bind-SelectedValues (with an 's' at the end). No matter the selection mode, you can set CheckMark="true" if you want the selected chips to display a check mark.

Milk

Eggs

Soap

Corn flakes

Salad

Apples

Red wine

Nothing selected.

Check marks

<MudChipSet @bind-SelectedValues="_selected" SelectionMode="SelectionMode.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 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