View in Storybook
Anatomy
A switch can be standalone element to sit next to additional text or work within certain components.
- Switch: Signifies whether an item has been toggled on or off by the consumer.
- Label (optional): Title of an item that can be selected.
- Help Text (optional): An additonal text description to help explain the purpose of the switch.
States
Switch has off, on, and disabled states. Should there be any time lag between turning a switch on or off, a loading spinner becomes visible.
Sizes
We support 2 sizes of our switch - Small, Default and Large. The size of the switch is determined on its placement. Our default size is used when nested within a component such as a Card or ListItem. Larger switches are independent or when placed outside contained spaces.
Usage
The Switch's purpose is to make a simple on/off choice that takes immediate effect. If you need multiple selections or have only one option, use Checkbox.
|
With label
Switches that display additional labels and descriptions are typically used separately and not nested within larger components.
|
|---|
|
Together with other components
When a switch is nested within a component, it is always fixed to the right hand edge of the component's container.
Switch also conforms to whatever the main component's alignment is. |
|---|
Best practice
Switch has a single purpose across the product which makes it different from other selectable components;
- Avoid long descriptions that sit alongside Switch. This is to avoid the use of truncation.
- Communicate why a switch is disabled and how to enable it if possible in the description text.
- When the selection takes immediate effect.
Do's and Don'ts
Also see