Switch

Allow users to toggle a configuration option between "on" and "off" states

Overview #

Use the switch component to allow users to toggle a persistent configuration option between “on” and “off” states.

Examples #

Choose an example

<button class="rvt-switch" data-rvt-switch="example-switch" role="switch" aria-label="Enable email notifications">
  <span class="rvt-switch__on">On</span>
  <span class="rvt-switch__off">Off</span>
</button>

Open in new window Copy link to example

<button class="rvt-switch" data-rvt-switch="example-switch" data-rvt-switch-on role="switch" aria-label="Enable two-factor authentication">
  <span class="rvt-switch__on">On</span>
  <span class="rvt-switch__off">Off</span>
</button>

Open in new window Copy link to example

<button class="rvt-switch rvt-switch--small" data-rvt-switch="example-switch" role="switch" aria-label="Enable email notifications">
  <span class="rvt-switch__on">On</span>
  <span class="rvt-switch__off">Off</span>
</button>

Open in new window Copy link to example

<button class="rvt-switch rvt-switch--danger" data-rvt-switch="example-switch" role="switch" aria-label="Use my location">
  <span class="rvt-switch__on">On</span>
  <span class="rvt-switch__off">Off</span>
</button>

Open in new window Copy link to example

<div class="rvt-flex rvt-justify-space-between rvt-items-center rvt-border-top rvt-border-bottom rvt-p-tb-md">
  <p>Enable email notifications</p>
  <button class="rvt-switch" data-rvt-switch="example-switch-1" role="switch" aria-label="Enable email notifications">
    <span class="rvt-switch__on">On</span>
    <span class="rvt-switch__off">Off</span>
  </button>
</div>

<div class="rvt-flex rvt-justify-space-between rvt-items-center rvt-border-bottom rvt-p-tb-md">
  <p>Enable two-factor authentication</p>
  <button class="rvt-switch" data-rvt-switch="example-switch-2" data-rvt-switch-on role="switch" aria-label="Enable two-factor authentication">
    <span class="rvt-switch__on">On</span>
    <span class="rvt-switch__off">Off</span>
  </button>
</div>

<div class="rvt-flex rvt-justify-space-between rvt-items-center rvt-border-bottom rvt-p-tb-md">
  <p>Use my location</p>
  <button class="rvt-switch rvt-switch--danger" data-rvt-switch="example-switch-3" role="switch" aria-label="Use my location">
    <span class="rvt-switch__on">On</span>
    <span class="rvt-switch__off">Off</span>
  </button>
</div>

Attributes #

Use the following attributes to configure a switch:

Attribute	Description
`data-rvt-switch-on`	Add to an element with the `data-rvt-switch` attribute to toggle that switch on by default

Usage #

Do

Use to allow users to toggle a persistent configuration option or behavior between "on" and "off" states
Use the danger variant to warn users about toggling on behaviors related to potentially destructive actions or sensitive data
Use the switch's custom events to update saved configuration options without reloading the page

Don't

Change the label text to something other than "On" and "Off"
Cause the page to refresh when the user toggles a switch
Use to ask a yes-or-no question as part of a form submission—use a checkbox instead
Use to ask for consent to an action like enrolling in a mailing list—use a checkbox instead

Accessibility #

ARIA labels #

Label	Description
`aria-checked`	Added to each `button` element with the `data-rvt-switch` attribute by the component’s JavaScript. Set to `true` if the associated switch is toggled on; `false` otherwise.

JavaScript #

Method	Description
`switchOn()`	Toggles the switch on
`switchOff()`	Toggles the switch off

Event	Description	Detail object properties
`rvtSwitchToggledOn`	Emitted when a switch is toggled on	—
`rvtSwitchToggledOff`	Emitted when a switch is toggled off	—

Learn more about using Rivet JavaScript