Switch

A control that allows the user to toggle between checked and not checked

Interactive-mode

Examples

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
Switch	Two-state toggle rendered as a `<button role="switch">`. Use with `@bind-Checked` for two-way binding; the `Variant` drives the checked-state colour.

Two-state toggle rendered as a <button role="switch">. Use with @bind-Checked for two-way binding; the Variant drives the checked-state colour.

Property	Type	Description
Checked	bool	Current checked state. Default: `false`.
CheckedChanged	EventCallback<bool>	Invoked when toggled. Use with `@bind-Checked` for two-way binding.
Variant	SwitchVariant	Checked-state colour. Default: `SwitchVariant.Primary`. Other values: `Danger`, `Success`.
Disabled	bool	When true, the switch is non-interactive and visually muted. Default: `false`.
AriaLabel	string?	Accessible label. Default: `"Toggle switch"`.
ClassName	string?	Extra CSS classes appended to the button.
AdditionalAttributes	Dictionary<string, object>?	Captured unmatched attributes, forwarded to the button.