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.
<MudChipSet @bind-SelectedChip="selected" Filter="true" 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.
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
<MudChipSet AllClosable="true" OnClose="Closed"> @foreach (var value in values) { <MudChip Text=""></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.
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
.
<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.
<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; }