Skip to main content

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 #


<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>
<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>
<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>
<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>
<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>

Elements #

Element Description Usage Required Multiple

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