Chip Set

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

API
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
<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>

<div class="d-flex flex-column align-center">
    @if (selected != null)
    {
        <MudText>You selected the <MudText Color="@selected.Color" Inline="true">@selected.Text</MudText> chip.</MudText>
    }
    <MudCheckBox @bind-Checked="mandatory">Mandatory</MudCheckBox>
</div>

@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.

<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>

<div class="d-flex flex-column align-center">
    @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>
</div>

@code
{
    bool filter = true;
    MudChip[] selected;
}
Adding and removing chips

Add chips 
<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

You selected Milk, Cornflakes.

<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>

<div class="d-flex justify-center">
    @if (selected != null && selected.Length>0)
    {
        <MudText>You selected @string.Join(", ", selected.Select(chip=>chip.Text)).</MudText>
    }
    else
    {
        <MudText>Nothing selected.</MudText>
    }
</div>

@code
{
    MudChip[] selected;
}
Variants

The chip's look different when selected depending on its initial Variant.

Default
Primary
Secondary
Info
Success
Warning
Error
Dark
Default
Primary
Secondary
Info
Success
Warning
Error
Dark
Default
Primary
Secondary
Info
Success
Warning
Error
Dark
<MudChipSet MultiSelection="true" Filter="filter">
    <MudChip Text="grey" Variant="Variant.Text" Color="Color.Default">Default</MudChip>
    <MudChip Text="purple" Variant="Variant.Text" Color="Color.Primary">Primary</MudChip>
    <MudChip Text="pink" Variant="Variant.Text" Color="Color.Secondary">Secondary</MudChip>
    <MudChip Text="blue" Variant="Variant.Text" Color="Color.Info">Info</MudChip>
    <MudChip Text="green" Variant="Variant.Text" Color="Color.Success">Success</MudChip>
    <MudChip Text="orange" Variant="Variant.Text" Color="Color.Warning">Warning</MudChip>
    <MudChip Text="red" Variant="Variant.Text" Color="Color.Error">Error</MudChip>
    <MudChip Text="black" Variant="Variant.Text" Color="Color.Dark">Dark</MudChip>
</MudChipSet>
<MudChipSet MultiSelection="true" Filter="filter">
    <MudChip Text="grey" Variant="Variant.Outlined" Color="Color.Default">Default</MudChip>
    <MudChip Text="purple" Variant="Variant.Outlined" Color="Color.Primary">Primary</MudChip>
    <MudChip Text="pink" Variant="Variant.Outlined" Color="Color.Secondary">Secondary</MudChip>
    <MudChip Text="blue" Variant="Variant.Outlined" Color="Color.Info">Info</MudChip>
    <MudChip Text="green" Variant="Variant.Outlined" Color="Color.Success">Success</MudChip>
    <MudChip Text="orange" Variant="Variant.Outlined" Color="Color.Warning">Warning</MudChip>
    <MudChip Text="red" Variant="Variant.Outlined" Color="Color.Error">Error</MudChip>
    <MudChip Text="black" Variant="Variant.Outlined" Color="Color.Dark">Dark</MudChip>
</MudChipSet>
<MudChipSet MultiSelection="true" Filter="filter">
    <MudChip Text="grey" Variant="Variant.Filled" Color="Color.Default">Default</MudChip>
    <MudChip Text="purple" Variant="Variant.Filled" Color="Color.Primary">Primary</MudChip>
    <MudChip Text="pink" Variant="Variant.Filled" Color="Color.Secondary">Secondary</MudChip>
    <MudChip Text="blue" Variant="Variant.Filled" Color="Color.Info">Info</MudChip>
    <MudChip Text="green" Variant="Variant.Filled" Color="Color.Success">Success</MudChip>
    <MudChip Text="orange" Variant="Variant.Filled" Color="Color.Warning">Warning</MudChip>
    <MudChip Text="red" Variant="Variant.Filled" Color="Color.Error">Error</MudChip>
    <MudChip Text="black" Variant="Variant.Filled" Color="Color.Dark">Dark</MudChip>
</MudChipSet>
<MudCheckBox @bind-Checked="filter">Filter</MudCheckBox>

@code
{
    bool filter = true;
}
Selected Color

The chip's selected color can be changed with the SelectedColor property, by default it has the same color as the chip.

Brunsås
Eggs
Cornflakes
Salad
Apples
Brunsås
Eggs
Cornflakes
Salad
Apples
Brunsås
Eggs
Cornflakes
Salad
Apples
<MudChipSet MultiSelection="true" Filter="filter">
    <MudChip Text="Brunsås" Variant="Variant.Text" Color="Color.Default" SelectedColor="Color.Primary"></MudChip>
    <MudChip Text="Eggs" Variant="Variant.Text" Color="Color.Primary" SelectedColor="Color.Secondary"></MudChip>
    <MudChip Text="Cornflakes" Variant="Variant.Text" Color="Color.Dark" SelectedColor="Color.Warning"></MudChip>
    <MudChip Text="Salad" Variant="Variant.Text" Color="Color.Info" SelectedColor="Color.Error"></MudChip>
    <MudChip Text="Apples" Variant="Variant.Text" Color="Color.Success" SelectedColor="Color.Error"></MudChip>
</MudChipSet>
<MudChipSet MultiSelection="true" Filter="filter">
    <MudChip Text="Brunsås" Variant="Variant.Outlined" Color="Color.Default" SelectedColor="Color.Primary"></MudChip>
    <MudChip Text="Eggs" Variant="Variant.Outlined" Color="Color.Primary" SelectedColor="Color.Secondary"></MudChip>
    <MudChip Text="Cornflakes" Variant="Variant.Outlined" Color="Color.Dark" SelectedColor="Color.Warning"></MudChip>
    <MudChip Text="Salad" Variant="Variant.Outlined" Color="Color.Info" SelectedColor="Color.Error"></MudChip>
    <MudChip Text="Apples" Variant="Variant.Outlined" Color="Color.Success" SelectedColor="Color.Error"></MudChip>
</MudChipSet>
<MudChipSet MultiSelection="true" Filter="filter">
    <MudChip Text="Brunsås" Variant="Variant.Filled" Color="Color.Default" SelectedColor="Color.Primary"></MudChip>
    <MudChip Text="Eggs" Variant="Variant.Filled" Color="Color.Primary" SelectedColor="Color.Secondary"></MudChip>
    <MudChip Text="Cornflakes" Variant="Variant.Filled" Color="Color.Dark" SelectedColor="Color.Warning"></MudChip>
    <MudChip Text="Salad" Variant="Variant.Filled" Color="Color.Info" SelectedColor="Color.Error"></MudChip>
    <MudChip Text="Apples" Variant="Variant.Filled" Color="Color.Success" SelectedColor="Color.Error"></MudChip>
</MudChipSet>
<MudCheckBox @bind-Checked="filter">Filter</MudCheckBox>

@code
{
    bool filter = true;
}
Chips
Container
An unhandled error has occurred. Reload 🗙