Styles
Using this Component
Switches should be used when allowing a user to toggle between two different states. The on/off state of the switch should correspond directly to the on/off state of what it is controlling. Do
Labels
All switches should have an adjacent label. To provide more context to the feature, the switch can be used beneath a UIHeader and/or include a descriptive text block beneath its label.
Alternatives
When allowing a user to select one or more items from a list of options, use a UICheckbox or UIRadio instead.
Structure
Behavior
Switches are a directly interactive elements. Depending on the context they may be disabled to prevent interactivity.
Clickable Area
Clicking anywhere on the switch, as well as anywhere on its label (when possible) should toggle the switch.
Related Components
Playground Coming Soon!
Styles
Using this Component
Switches should be used when allowing a user to toggle between two different states. The on/off state of the switch should correspond directly to the on/off state of what it is controlling. Do
Labels
All switches should have an adjacent label. To provide more context to the feature, the switch can be used beneath a UIHeader and/or include a descriptive text block beneath its label.
Alternatives
When allowing a user to select one or more items from a list of options, use a UICheckbox or UIRadio instead.
Structure
Behavior
Switches are a directly interactive elements. Depending on the context they may be disabled to prevent interactivity.
Clickable Area
Clicking anywhere on the switch, as well as anywhere on its label (when possible) should toggle the switch.