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.