Components

Switch

Accessible
View on GitHub

Switch enables a user to quickly toggle between two states.

Toggling a Switch triggers its action immediately, which differs from a radio group in that a radio group’s action is typically initiated from a form submit button. Switches differ from checkboxes in that the interaction results in an immediate state change.

How to use

  • Switch states are saved immediately on click unless using the loading prop
    • Like a light switch, you don't flip it, then submit it. The change takes effect right when you click.
    • The only time a Switch interaction does not result in immediate user feedback is during a loading stage, at which point the Switch is disabled temporarily.
  • Switch states are persistent
    • A change to a Switch persists throughout all sessions until user flips the Switch again.
  • Unlike Checkboxes, Switches should not affect Form data, only the UI of the form.

Presentation

  • All Switches must always have an associated label
    • Label must be written as to describe the on state of the Switch.
      • i.e. "Email Notification Enabled"
    • Avoid using negations such as "Notifications Off", which would mean the user would have to turn the Switch on to turn the setting off.
    • Detailed descriptions of the Switch setting should be placed directly beneath the Switch.