Switch
On this page
On this page
Switch
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>
```Check Icon
import '@rhds/elements/rh-switch/rh-switch.js';
```section {
margin: 2rem;
}
fieldset {
display: grid;
grid-template-columns: max-content max-content;
gap: var(--rh-space-lg, 16px);
}
label {
color: var(--rh-color-text-primary-on-light, #151515);
}
```<section>
<form>
<fieldset>
<legend>Checked with label</legend>
<rh-switch id="switch-a" accessible-label="Switch A" message-on="Message when on" message-off="Message when off" checked="" show-check-icon=""></rh-switch>
</fieldset>
</form>
</section>
```Color Context
import '@rhds/elements/rh-switch/rh-switch.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
```rh-context-demo::part(demo) {
display: flex;
align-items: start;
flex-wrap: wrap;
gap: var(--rh-space-lg, 16px);
}
```<rh-context-demo>
<rh-switch accessible-label="Checked" message-on="Checked on" message-off="Checked off" checked=""></rh-switch>
<rh-switch accessible-label="Unchecked" message-on="Unchecked on" message-off="Unchecked off"></rh-switch>
<rh-switch accessible-label="Checked with icon" message-on="Checked with icon on" message-off="Checked with icon off" checked="" show-check-icon=""></rh-switch>
<rh-switch accessible-label="Unchecked with icon" message-on="Unchecked with icon on" message-off="Unchecked with icon off" show-check-icon=""></rh-switch>
<rh-switch accessible-label="Checked disabled" message-on="Disabled checked on" message-off="Disabled checked off" checked="" disabled=""></rh-switch>
<rh-switch accessible-label="Unchecked disabled" message-on="Disabled unchecked on" message-off="Disabled unchecked off" disabled=""></rh-switch>
<rh-switch accessible-label="Checked disabled with icon" message-on="Disabled checked with icon on" message-off="Disabled checked with icon off" show-check-icon="" checked="" disabled=""></rh-switch>
<rh-switch accessible-label="Unchecked disabled with icon" message-on="Disabled unchecked with icon on" message-off="Disabled unchecked with icon off" show-check-icon="" disabled=""></rh-switch>
</rh-context-demo>
```Disabled
import '@rhds/elements/rh-switch/rh-switch.js';
```section {
margin: 2rem;
}
fieldset {
display: grid;
grid-template-columns: max-content max-content;
gap: var(--rh-space-lg, 16px);
}
label {
color: var(--rh-color-text-primary-on-light, #151515);
}
rh-switch:is(:disabled) ~ label {
color: var(--rh-color-text-secondary-on-light, #4d4d4d);
}
```<section>
<form>
<fieldset>
<legend>Checked and Disabled</legend>
<rh-switch id="switch-a" disabled="" message-on="Message when on" message-off="Message when off" accessible-label="Switch A" checked=""></rh-switch>
</fieldset>
<fieldset>
<label for="switch-b">Switch B</label>
<rh-switch disabled="" id="switch-b" message-on="Message when on" message-off="Message when off" checked=""></rh-switch>
</fieldset>
</form>
</section>
```Fieldset
import '@rhds/elements/rh-switch/rh-switch.js';
document.getElementById('form-disabled').addEventListener('change', /** @this{HTMLFieldsetElement}*/function(event) {
const controlsId = event.target.getAttribute('aria-controls');
const controls = document.getElementById(controlsId);
controls.toggleAttribute('disabled', event.target.checked);
if (controlsId.includes('fieldset') && event.target.checked === true) {
// eg update disable-switch-a state
const suffix = [...controlsId].pop();
document.getElementById(`disable-switch-${suffix}`).checked = event.target.checked;
}
});
```section {
margin: 2rem;
}
fieldset {
display: grid;
grid-template-columns: max-content max-content;
gap: var(--rh-space-lg, 16px);
}
fieldset:has(#reversed) {
grid-template-columns: max-content min-content;
}
label {
color: var(--rh-color-text-primary-on-light, #151515);
font-weight: var(--rh-font-weight-heading-medium, 500);
}
rh-switch:is(:disabled) ~ label {
color: var(--rh-color-text-secondary-on-light, #4d4d4d);
}
```<section>
<p>A switch toggles the state of a setting (between on and off). Switches provide a more explicit, visible representation on a setting.</p>
<form>
<fieldset id="fieldset-a">
<legend>Option A</legend>
<rh-switch id="switch-a" accessible-label="Switch A" message-on="Message when on" message-off="Message when off" checked=""></rh-switch>
</fieldset>
<fieldset id="fieldset-b">
<legend>Option B (Explicit label)</legend>
<label for="switch-b">Switch B</label>
<rh-switch id="switch-b" message-on="Message when on" message-off="Message when off" checked=""></rh-switch>
</fieldset>
<fieldset id="form-disabled">
<legend>Form Disabled State</legend>
<label for="disable-fieldset-a">Disable Fieldset A</label>
<rh-switch id="disable-fieldset-a" message-on="Fieldset A is disabled" message-off="ieldset A is enabled" aria-controls="fieldset-a"></rh-switch>
<label for="disable-switch-a">Disable Switch A</label>
<rh-switch id="disable-switch-a" message-on="Switch A is disabled" message-off="Switch A is enabled" aria-controls="switch-a"></rh-switch>
<label for="disable-fieldset-b">Disable Fieldset B</label>
<rh-switch id="disable-fieldset-b" message-on="Fieldset A is disabled" message-off="Fieldset A is enabled" aria-controls="fieldset-b"></rh-switch>
<label for="disable-switch-b">Disable Switch B</label>
<rh-switch id="disable-switch-b" message-on="Switch A is disabled" message-off="Switch A is enabled" aria-controls="switch-b"></rh-switch>
</fieldset>
</form>
</section>
```Nested In Label
import '@rhds/elements/rh-switch/rh-switch.js';
import '@rhds/elements/rh-button/rh-button.js';
document.getElementById('nested-label').addEventListener('submit', /** @this {HTMLFormElement} */function(event) {
event.preventDefault();
this.querySelector('output').textContent = `Dark mode ${this.elements.status.checked ? 'On' : 'Off'}`;
});
```section {
padding: 1em;
}
fieldset {
display: grid;
grid-template-columns: min-content max-content;
gap: var(--rh-c-switch--ColumnGap, var(--rh-c-switch__label--PaddingLeft, 1rem));
&:has(#reversed) {
grid-template-columns: max-content min-content;
}
}
label {
color: var(--rh-color-text-primary-on-light, #151515);
}
#nested-label fieldset {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#nested-label output {
width: 100%;
}
```<section>
<form id="nested-label">
<fieldset>
<legend>Nested in a label</legend>
<label> Dark Mode
<rh-switch name="status" message-on="On" message-off="Off" checked=""></rh-switch>
</label>
<rh-button type="submit">Submit</rh-button>
<output>Submit to read status</output>
</fieldset>
</form>
</section>
```Reversed
import '@rhds/elements/rh-switch/rh-switch.js';
```form {
margin: 2rem;
& fieldset {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
& label {
color: var(--rh-color-text-primary-on-light, #151515);
}
}
}
```<form>
<fieldset>
<legend>Reversed message</legend>
<rh-switch id="switch-a" accessible-label="Switch A" message-on="Message when on" message-off="Message when off" checked="" reversed=""></rh-switch>
</fieldset>
<fieldset>
<legend>Reversed with label</legend>
<label for="switch-b">Switch B</label>
<rh-switch id="switch-b" message-on="Message when on" message-off="Message when off" checked="" reversed=""></rh-switch>
</fieldset>
<fieldset>
<legend>Reversed with slotted message</legend>
<rh-switch id="switch-a" accessible-label="Switch A" checked="" reversed="">
<span slot="message-on">Message when on</span>
<span slot="message-off">Message when off</span>
</rh-switch>
</fieldset>
<fieldset>
<legend>Reversed with label and slotted message</legend>
<label for="switch-b">Switch B</label>
<rh-switch id="switch-b" checked="" reversed="">
<span slot="message-on">Message when on</span>
<span slot="message-off">Message when off</span>
</rh-switch>
</fieldset>
</form>
```Rich Messages
import '@rhds/elements/rh-switch/rh-switch.js';
```<rh-switch id="switch-a" accessible-label="Switch A" checked="">
<span slot="message-on">Message when <strong>on</strong></span>
<span slot="message-off">Message when <strong>off</strong></span>
</rh-switch>
```Right To Left
import '@rhds/elements/rh-switch/rh-switch.js';
```label {
color: var(--rh-color-text-primary-on-light, #151515);
}
rh-switch:is(:disabled) ~ label {
color: var(--rh-color-text-secondary-on-light, #4d4d4d);
}
[color-palette^="dark"] label {
color: var(--rh-color-text-primary-on-dark, #ffffff)
}
[color-palette^="dark"] rh-switch:is(:disabled) ~ label {
color: var(--rh-color-text-secondary-on-dark, #c7c7c7);
}
fieldset {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
fieldset div {
display: flex;
gap: 1rem;
}
```<form dir="rtl">
<fieldset>
<legend>Right To Left - No Label</legend>
<div>
<rh-switch accessible-label="RTL Switch No Messages"></rh-switch>
</div>
<div>
<rh-switch accessible-label="RTL Switch No Messages, Checked" checked=""></rh-switch>
</div>
<div>
<rh-switch id="switch-a" accessible-label="RTL Switch with Messages, Checked" message-on="Message when on" message-off="Message when off" checked=""></rh-switch>
</div>
<div>
<rh-switch id="switch-b" message-on="Message when on" message-off="Message when off" accessible-label="RTL Switch with Messages, Show Checked Icon" show-check-icon=""></rh-switch>
</div>
<div>
<rh-switch id="switch-c" accessible-label="RTL with Reversed Messages, Show Checked Icon" message-on="Reversed message when on" message-off="Reversed message when off" show-check-icon="" reversed=""></rh-switch>
</div>
</fieldset>
<fieldset disabled="">
<legend>Right to Left - Disabled</legend>
<div>
<rh-switch id="switch-w" accessible-label="Disabled RTL Switch No Label"></rh-switch>
</div>
<div>
<rh-switch id="switch-x" accessible-label="Disabled RTL Switch No Label, Checked" checked=""></rh-switch>
</div>
<div>
<rh-switch id="switch-y" accessible-label="Disabled RTL Switch No Label, Checked, Show Checked Icon" checked="" show-check-icon=""></rh-switch>
</div>
<div>
<label for="switch-z">Disabled RTL Switch with Label and Messages</label>
<rh-switch id="switch-z" message-on="Disabled Message when on" message-off="Disabled Message when off"></rh-switch>
</div>
<div>
<label for="switch-1">Disabled RTL Switch with Label and with Messages, Show Checked Icon</label>
<rh-switch id="switch-1" message-on="Disabled Message when on" message-off="Disabled Message when off" checked="" show-check-icon=""></rh-switch>
</div>
</fieldset>
<fieldset>
<legend>Right to Left - With Sibling Label</legend>
<div>
<label for="switch-e">RTL Switch</label>
<rh-switch id="switch-e" message-on="Message when on" message-off="Message when off" checked=""></rh-switch>
</div>
<div>
<label for="switch-f">RTL Switch</label>
<rh-switch id="switch-f" message-on="Message when on" message-off="Message when off"></rh-switch>
</div>
<div>
<label for="switch-g">RTL Switch, Show Checked Icon</label>
<rh-switch id="switch-g" checked="" show-check-icon="" message-on="Message when on" message-off="Message when off"></rh-switch>
</div>
<div>
<rh-switch id="switch-h" message-on="Reversed message when on" message-off="Reversed message when off" checked="" show-check-icon="" reversed=""></rh-switch>
<label for="switch-h">Switch with Reversed Messages, Show Checked Icon</label>
</div>
</fieldset>
<fieldset>
<legend>Right to Left - With Rich Messages</legend>
<div>
<rh-switch accessible-label="RTL Switch" checked="">
<div slot="messages">Message when
<span data-state="on">On</span>
<span data-state="of" hidden="">Off</span>
</div>
</rh-switch>
</div>
</fieldset>
</form>
```Without Messages
import '@rhds/elements/rh-switch/rh-switch.js';
```section {
margin: 2rem;
}
fieldset {
display: grid;
grid-template-columns: max-content max-content;
gap: var(--rh-space-lg, 16px);
}
```<section>
<form>
<fieldset>
<legend>Without messages</legend>
<rh-switch id="switch-a" accessible-label="Switch A" checked=""></rh-switch>
<rh-switch id="switch-b" accessible-label="Switch B" checked="" show-check-icon=""></rh-switch>
</fieldset>
</form>
</section>
```Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
