Guidelines
On or off
A toggle must be set to either check (on), or unchecked (off).
Alternate selection controls
For a set of options requiring a single selection that is not an on/off setting, instead use Radio buttons
For a set of options that allows multiple selections, and requires the user to perform additional steps for changes to become effective, instead use Checkbox
Immediate response
Use a toggle when an immediate response is required without additional user action, such as selecting "save" or "apply".
Content
While toggles themselves do not contain content, they will be displayed following a title, or instruction that explains to the user what the toggle affects.
Do
- Use sentence case when writing titles or hints that relate to a toggle.
- Keep in mind that a toggle is either "on" or "off". The content should indicate what happens in each of these states, generally placing emphasis on what happens in the "on" state.
- Hints should indicate what the toggle might change somewhere else in the product.
Do not
- Write instructions for multiple functions around a single toggle.
- Write toggle titles in the form of a question. Instead, write statements that place emphasis on what the toggle affects when "on".
Accessibility
Toggles should have Labels that can be read by screen readers, and that can be tapped to make it easier for users to select and deselect.
Keyboard
- Use a <button> element and include aria-pressed or role="switch" for your toggles.
- Add optional labels to your toggles when possible. Make sure the label element includes an id and the toggle button includes an aria-labelledby tag that match.
- Make sure you include aria-checked on toggles, with JavaScript changing the state on click from true to false (or the reverse).
- Make sure you check the contrast of the toggle text against the background (if text is used).