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
Write labels as affirmative statements
The label should describe what is enabled when the toggle is on.
✅ Enable automatic payments
✅ Show prices with tax included
🚫 Do not enable automatic payments
🚫 Hide prices with tax included
Use sentence case with no punctuation
✅ Allow guest check-in after midnight
🚫 Allow Guest Check-In After Midnight.
Keep labels short and clear
Aim for one line of text — no long explanations in the label itself.
Explain any important context in helper text
If the effect of the toggle needs more explanation, use short helper text below.
✅ Label: Enable overbooking
Helper text: Allows guests to book even if inventory is full.
Avoid ambiguity — make it clear what ON and OFF mean
✅ Enable notifications
🚫 Notifications (with no context about what ON or OFF does)
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).