Switch
Importing
Add rh-switch to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-switch/rh-switch.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-switch id="switch-a"
accessible-label="Switch A"
message-on="Message when on"
message-off="Message when off"
checked></rh-switch>
<script type="module">
import '@rhds/elements/rh-switch/rh-switch.js';
</script>
<style>
rh-switch {
margin: var(--rh-space-lg);
}
</style>rh-switch
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.
| Slot Name | Description |
|---|---|
message-on |
message content when checked. Overrides the |
message-off |
message content when unchecked. Overrides the |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
accessible-label |
accessibleLabel |
invisible, accessible label for screen readers |
|
|
message-on |
messageOn |
Message to display when the switch is on (i.e. checked) |
|
|
message-off |
messageOff |
Message to display when the switch is off (i.e. unchecked) |
|
|
show-check-icon |
showCheckIcon |
If the checkmark icon should be displayed when the switch is on |
|
|
checked |
checked |
If the switch is on |
|
|
disabled |
disabled |
If the switch is disabled |
|
|
reversed |
reversed |
If the switch is reversed: message first, then control |
|
|
| Method Name | Description |
|---|---|
formDisabledCallback(disabled: boolean) |
| Event Name | Description |
|---|---|
change |
| CSS Property | Description | Default |
|---|---|---|
--rh-switch-unchecked |
The background color of the switch when it is unchecked. |
—
|
--rh-switch-checked |
The background color of the switch when it is checked. |
—
|
--rh-switch-disabled |
The background color of the switch when it is disabled. |
—
|
| Token | Copy |
|---|---|
--rh-border-radius-pill
|
|
--rh-border-width-md
|
|
--rh-box-shadow-sm
|
|
--rh-color-accent-base
|
|
--rh-color-border-interactive
|
|
--rh-color-gray-30
|
|
--rh-color-gray-40
|
|
--rh-color-gray-50
|
|
--rh-color-gray-60
|
|
--rh-color-surface-dark
|
|
--rh-color-surface-lightest
|
|
--rh-color-text-primary
|
|
--rh-color-text-secondary
|
|
--rh-space-lg
|
|
--rh-space-sm
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
