Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Switch
A headless switch primitive for toggling between on and off states.
Basic
A simple toggle switch. Use
@bind-Checked for two-way binding of the Checked state.
Loading example…
With Label
Switch with an associated label. Set the
Id parameter to link with a <label> element via the for attribute.
Loading example…
Disabled
Switch in disabled state. Set
Disabled to true to prevent user interaction.
Loading example…
Data Attributes
Use these data attributes for CSS styling:
[data-state="checked"]- When switch is on[data-state="unchecked"]- When switch is off[data-disabled]- When disabled