Skip to content
On this page

ToggleSwitch

Use toggle switch to toggle a setting on or off, and immediately saves the change.
  • Alpha
  • Not reviewed for accessibility
On this page
This component requires JavaScript to function. Please refer to the Installation section to set it up.

The ToggleSwitch component is a button that toggles between two boolean states. It is meant to be used for settings that should cause an immediate update. If configured with a "src" attribute, the component will make a POST request containing data of the form "value: 0 | 1".

Arguments

NameTypeDefaultDescription
srcStringnilThe URL to POST to when the toggle switch is toggled. If nil, the toggle switch will not make any requests.
csrf_tokenStringnilA CSRF token that will be sent to the server as "authenticity_token" when the toggle switch is toggled. Unused if src is nil.
checkedBooleanfalseWhether the toggle switch is on or off.
enabledBooleantrueWhether or not the toggle switch responds to user input.
sizeSymbol:mediumWhat size toggle switch to render. One of :end or :start.
status_label_positionSymbol:startWhich side of the toggle switch to render the status label. One of :medium or :small.
system_argumentsHashN/ASystem arguments

Examples

Default

<%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo")) %>

Checked

<%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", checked: true)) %>

Disabled

<%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", enabled: false)) %>

Checked and Disabled

<%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", checked: true, enabled: false)) %>

Small

<%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", size: :small)) %>

With status label positioned at the end

<%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", status_label_position: :end)) %>