A switch enables a binary on/off selection for a feature.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| checked | bool | - | - | |
| elementId | string | - | - | |
| isDisabled | bool | - | - | Whether it is disabled, will render greyscale if so * |
| onClick | func | - | - | |
| testSection | string | - | - | Hook for automated JavaScript tests |
Usage
The switch offers the user a choice between on or off. Switches should be real time. Their state should be immediately saved and reflected in the app. Avoid using switches with save or apply buttons.
Labeling
Keep the label for a switch near the control itself. It should be immediately obvious to a user what a switch controls.
Best Practices
Do
Use switches for on/off states.
Keep the label in close proximity to the switch itself.
Don't
Never use a switch for two mutually exclusive options other than on or off.
Don't use a save button with switches. Changing the switch should take effect immediately.