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.With Label
Switch with an associated label. Set the
Id parameter to link with a <label> element via the for attribute.Disabled
Switch in disabled state. Set
Disabled to true to prevent user interaction.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