ComponentsActions
Toggle group
A toggle group is a row of connected buttons where one or several stay selected. Choose it for a small, always-visible set of options such as a view mode or filters; use a select when the options are many or rarely changed.
Selection modes
SingleSelection always keeps one value, ToggleSelection lets the user clear it by pressing the selected item again, and MultiSelection binds a set of values.
Single selection: map layer
Value: Streets
Toggle selection: fare zone (press again to clear)
Value: 2
Multi selection: station facilities
Values: Step-free, Toilets
Every color and size
All 36 combinations of Color and Size. Color tints the border and the selected item; Size changes padding and type.
| Color ↓ · Size → | Small | Medium | Large |
|---|---|---|---|
| Default | |||
| Primary | |||
| Secondary | |||
| Tertiary | |||
| Info | |||
| Success | |||
| Warning | |||
| Error | |||
| Dark | |||
| Transparent | |||
| Inherit | |||
| Surface |
Appearance options
Checkmarks, reserved checkmark space, no outline, no delimiters, a vertical layout and a custom selected class, each switched on alone.
CheckMark
FixedContent (no jump)
Outlined="false"
Delimiters="false"
Vertical
SelectedClass
Icon items
Items can show any content. Icon-only items need an aria-label, and the group itself is named so the choices make sense out of context.
Text alignment
Aligned: left
Catalogue view
View: Grid
Custom content
ChildContent receives whether the item is selected, so a card-like option can show its own check mark, times and remaining seats.
Booked: Deep sky
Scenario: departure board filters
A single choice for the time window and a multi-select for transport modes filter a timetable.
| Leaves in | Mode | Line | Destination |
|---|---|---|---|
| 3 min | Tram | T2 | Harbour Gate |
| 7 min | Bus | 41 | Old Mill |
| 12 min | Rail | R5 | Airport |
| 18 min | Bus | 12N | University |
| 26 min | Tram | T4 | Riverside Park |
5 departures shown.
Disabled groups and items
Disable the whole group while it cannot change, or a single item that is unavailable, and say why next to it.
Whole group disabled
One item disabled
Without ripple
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
Selected: Classic
<MudToggleGroup T="string" @bind-Value="_crust">
<MudToggleItem Value="@("Thin")" />
<MudToggleItem Value="@("Classic")" />
<MudToggleItem Value="@("Deep pan")" />
</MudToggleGroup>