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
Default switch Switch toggled on by default Small switch Danger switch List of configuration options
< 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 #
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
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