Toggle Switch labels are on the right side of the toggle element. They generally have two pieces: the action being taken, and the subject matter.
Labels can have a help icon with a tooltip to provide additional context to a label.
Sometimes it make sense for the toggle's subject to be separated from the toggle itself. This is useful in a list-context or if the subject is tied to a more complex UI component such as a Card, Table, or Page title.
When scanning a set of options, it may make sense to separate the toggle's subject to the left. This can be done with caution: the user should be able to understand they are toggling the text to the left on or off.
A toggle switch can also have no label when the context of what it turns on or off can be clearly understood. A tooltip can also be applied to describe the toggle's current state.
The Toggle Switch label is always the same text. It describes what the "ON" state of the toggle is. The label should not switch based off the toggle's state.
Labels in general should be positive. Since the label and toggle are generally thought of as turning something on, labels should reenforce this. Examples include “Show”, “Hide”, “Activate”, “Group [by]”, “Track”, and “Activate”. Negative labeling can be used with caution, if it makes sense to a user to perform a negative action.
In general, toggle switches should provide immediate feedback that something has occurred.
Consider using a Checkbox when a button needs to be pressed in for the setting to take place.
A Toggle Switch can also be added into a Form component.
The toggle switch label should describe what the control does when it is turned on. Rule of thumb: say the label name and add an “on/off”.
Use sentence case (capitalize only the first word and proper nouns) so control labels are easy to scan. Do not use periods for short phrases or single sentences.
The toggle switch label might not give the required information and context they need to make an informed decision about the option.
Inline help is the best option for this situation because it requires no user interaction and is always visible. Keep inline help to 1-2 sentences. Use the content guidelines for inline help.
Avoid using a tooltip to communicate this kind of information about an option. It’s an additional step for users to mouse over the tooltip to reveal its information, and users can’t refer to the tooltip content and take action at the same time.
Form design pattern for how related controls are ordered.
import { ToggleSwitch } from '@servicetitan/design-system';