Skip to content
On this page


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


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



<%= render( "/foo")) %>


<%= render( "/foo", checked: true)) %>


<%= render( "/foo", enabled: false)) %>

Checked and Disabled

<%= render( "/foo", checked: true, enabled: false)) %>


<%= render( "/foo", size: :small)) %>

With status label positioned at the end

<%= render( "/foo", status_label_position: :end)) %>