ComponentsInputs and forms
Switch
A toggle for a setting that takes effect immediately, like a light switch. Use it in settings lists; use a check box when the choice is confirmed later with a button.
Labels and binding
Bind Value to a bool. Write the label as the setting's name, not as a question, so it reads correctly in both states.
Dome lights off; red-light mode on.
Every size and color
Size against Color for a switched-on toggle. The color shows only when on; UncheckedColor tints the off state.
| Size ↓ · Color → | Default | Primary | Secondary | Tertiary | Info | Success | Warning | Error | Dark | Transparent | Inherit | Surface |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Small | ||||||||||||
| Medium | ||||||||||||
| Large |
Thumb icons and off colors
ThumbIcon draws an icon on the knob. Changing it with the value reinforces the state for people who cannot rely on color.
Label placement
LabelPlacement puts the label on any side. Settings lists often place the label at the start so switches align at the end.
A settings list
Switches with descriptions, where turning one setting off disables the settings that depend on it.
Observation alerts
All alerts
Turn off to silence everything belowClear skies
When cloud cover drops below 20%Aurora forecast
When the Kp index reaches 5 or moreSpace station passes
Ten minutes before a visible passDisabled, read-only and required
Disabled switches cannot be focused; read-only switches can be focused but ignore changes. Required switches validate like check boxes.
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
<MudSwitch @bind-Value="_quietHours" Label="Quiet hours" Color="Color.Primary" />