Switch
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
npm install @rhds/elements
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Add it to your page with this import statement
<script type="module">
import '@rhds/elements/rh-switch/rh-switch.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
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>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
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-alt
|
|
--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.