Live Demo
Default
Default with icon
Anatomy
Switches can perform an action immediately and without confirmation. Switches may be grouped for multiple
- Switch toggle
- Label
- Supporting text
Layout
- Inbetween Padding: 12px
- Content Padding bottom: 2px
Variants
Default Toggle Switches: Use the default toggle when you need to specify label text in addition to the toggle action text. Default toggles appear in forms or within full pages of information.
Small Toggle: Use the small toggle when you do not need to specify label or action text. Small toggles are more compact in size and are used inline with other components.
States
The possible states of switches
Guidelines
- Set switches to either "on" or "off" states.
- Always accompany switches with labels or context.
- Label switches in sentence case without punctuation, limiting to six words or fewer.
- For longer labels, consider shortening and providing context in an outer container.
- Utilize Radio for single selections other than "on" or "off."
- Choose switches for instant responses, like "Save" or "Apply."
- Opt for Checkboxes for multi-select options that need further user steps for changes to take effect.
Label and toggle should be top aligned.
Do not center align or bottom align label and toggle..
Toggle should be used on their own to define their value.
Using negative phrasing in checkboxes can be confusing; in the example, the ambiguous phrasing doesn’t indicate whether the action performed by the user is positive or not.