Skip to main content

SWITCH

Description​

The switch allows a user to toggle a binary function on or off. A switch should produce an immediate change in the surrounding UI to let the user know it is working, and should not be replaced by a checkbox in a form.

If an immediate change is not needed (e.g., setting a preference), consider using a single checkbox instead.

Coming soon: do/do not example(s)

Usage​

Labels​

The switch label is left-aligned (default) or can be optionally top-aligned.

The label should describe the option that the switch controls, as well as its state. Keep labels short and direct. A label should describe that the control does when the switch is on.

Coming soon: example(s) of label best practices

Best Practices​

Switches control binary options, not opposing ones. A binary option represents a single state that is either on or off.

Opposing options are two separate states that are opposite but related to different user tasks

Coming soon:examples

Labels​

  • Use sentence case for button labels
  • Avoid unnecessary punctuation like periods and exclamation points
  • Keep labels short (around 1 to 3 words)