Switch
On this page
On this page
Overview
A switch toggles the state of a setting (between on and off). Switches and checkboxes can often be used interchangeably, but the switch provides a more explicit, visible representation on a setting.
Edit element properties
import '@rhds/elements/rh-switch/rh-switch.js';rh-switch {
margin: var(--rh-space-lg);
}<rh-switch id="switch-a" accessible-label="Switch A" message-on="Message when on" message-off="Message when off" checked=""></rh-switch>invisible, accessible label for screen readers
Message to display when the switch is on (i.e. checked)
Message to display when the switch is off (i.e. unchecked)
If the checkmark icon should be displayed when the switch is on
If the switch is on
If the switch is disabled
If the switch is reversed: message first, then control
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Planned
When to use
- When users need to choose between two binary actions
- When users need to immediately activate or deactivate something
- When users need to toggle an item on or off
Example of switch that's on.
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component should be added to the RH Shared Libs repo at a later date |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
