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

Chip Set

The ChipSet is used for creating groups of selections using chips.
See also: Chip

See Chip Set API for parameter documentation.

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.

Default
Primary
Secondary
Info
Success
Warning
Error
Dark

Select a chip.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudChipSet @bind-SelectedChip="selected" Filter="true" Mandatory="@mandatory">
    <MudChip Text="grey">Default</MudChip>
    <MudChip Text="purple" Color="Color.Primary">Primary</MudChip>
    <MudChip Text="pink" Color="Color.Secondary">Secondary</MudChip>
    <MudChip Text="blue" Color="Color.Info">Info</MudChip>
    <MudChip Text="green" Color="Color.Success">Success</MudChip>
    <MudChip Text="orange" Color="Color.Warning">Warning</MudChip>
    <MudChip Text="red" Color="Color.Error">Error</MudChip>
    <MudChip Text="black" Color="Color.Dark">Dark</MudChip>
</MudChipSet>


@if (selected != null)
{
    <MudText>You selected the <MudText Color="@selected.Color" Inline="true">@selected.Text</MudText> chip.</MudText>
}
else
{
    <MudText>Select a chip.</MudText>
}
<MudCheckBox @bind-Checked="mandatory">Mandatory</MudCheckBox>
@code
{
    bool mandatory = true;
    MudChip selected;
}

Multiselection

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

Milk
Eggs
Soap
Cornflakes
Salad
Apples
Red wine

Nothing selected.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudChipSet @bind-SelectedChips="selected" MultiSelection="true" Filter="filter">
    <MudChip Text="Milk"></MudChip>
    <MudChip Text="Eggs"></MudChip>
    <MudChip Text="Soap"></MudChip>
    <MudChip Text="Cornflakes"></MudChip>
    <MudChip Text="Salad"></MudChip>
    <MudChip Text="Apples"></MudChip>
    <MudChip Text="Red wine"></MudChip>
</MudChipSet>


@if (selected != null && selected.Length>0)
{
    <MudText>You selected @string.Join(", ", selected.Select(chip=>chip.Text)).</MudText>
}
else
{
    <MudText>Nothing selected.</MudText>
}
<MudCheckBox @bind-Checked="filter">Filter</MudCheckBox>
@code
{
    bool filter = true;
    MudChip[] selected;
}

Adding and removing chips

Add chips
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudChipSet AllClosable="true" OnClose="Closed">
    @foreach (var value in values)
    {
        <MudChip Text="@value"></MudChip>
    }
</MudChipSet>

Add chips <MudIconButton Icon="@Icons.Material.Filled.Add" OnClick="Add"></MudIconButton>
@code
{
    int i = 1;
    List<string> values = new List<string>();
    public void Add() => values.Add("Value " + (i++));
    public void Closed(MudChip chip) => values.Remove(chip.Text);
}

Default chips

Chips which haveDefault="true" will be initially selected.

Milk
Eggs
Soap
Cornflakes
Salad
Apples
Red wine

Nothing selected.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudChipSet @bind-SelectedChips="selected" MultiSelection="true" Filter="true">
    <MudChip Text="Milk" Default="true"></MudChip>
    <MudChip Text="Eggs"></MudChip>
    <MudChip Text="Soap"></MudChip>
    <MudChip Text="Cornflakes" Default="true"></MudChip>
    <MudChip Text="Salad"></MudChip>
    <MudChip Text="Apples"></MudChip>
    <MudChip Text="Red wine"></MudChip>
</MudChipSet>


@if (selected != null && selected.Length>0)
{
    <MudText>You selected @string.Join(", ", selected.Select(chip=>chip.Text)).</MudText>
}
else
{
    <MudText>Nothing selected.</MudText>
}
@code
{
    MudChip[] selected;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙