A Switch is a binary selector that instantly turns something on or off.
It should have a single, static label and the left/right toggle communicates that the property is on/off.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Status icon |
Supporting visual indicator of switch’s on or off state. |
No |
|
2. Switch control |
Positioned left for off state and right for on state. |
No |
|
3. Label |
Mandatory textual label used to guide users in choosing an appropriate state. |
No |
|
4. Popover trigger |
Used to display a Popover with more content explaining the context of a field. Used when helper text is not sufficient. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| isDisabled Variant | false | true | false |
| Property | Values | Default |
|---|---|---|
| isOn Variant | false | true | false |
| state Variant | rest | hover | focus | rest |
| isDisabled Variant | false | true | false |
Component dependencies
This component is internally dependent on the following components:
Help and support