Use a toggle to switch something between 2 states
Usage
Toggles are the best way to let users adjust settings. This could be turning something on or off or enabling or disabling a function. The impact of changing a toggle should be immediate without the user needing to save.
Toggles can also be used to switch between two different but equal states. If a toggle changes a visible state, such as making more options available, or changing parameters of a graph, this should be seen immediately when the toggle is switched.
Don’t use a toggle to select several related options in a list. Use a checkbox instead.
Don’t use a toggle if it’s necessary to save option(s) before they take effect.
To allow users to agree or disagree with permissions such as terms and conditions. Use the checkbox component.
Writing a toggle label
Toggles should always have a label next to them to identify what they do.
- Labels can either describe an object or an action. For example, “Email notifications” or “Show dates”.
- Labels should be short and direct so they’re easily scannable.
- Labels should have keywords first. For example, “Meter reading notifications” as opposed to “Turn on notifications for meter readings”.
- Labels should be unique.
If listing more than 10 toggles together, consider grouping them using sub-headings or tabs to make it easier to scan through the options.
Hint text
Adding hint text to a label is optional. Ideally, labels should be as descriptive as possible so hint text can be avoided as it may impact scannability. Hint text should only be used to add a description where necessary.
Warnings
Unlike other selection components, toggles won’t have an error state since either state is possible. However, switching a toggle may result in an unforeseen outcome. For example, turning off data collection may impact the accuracy of information we can provide the user. Hint text can be used to explain this. But if hint text is already in use, it may be necessary to have this information appear using another component such as a notification or toast.
Label position
By default the label relating to a toggle is positioned to its left and space apart, but this can be switched to a right alignment with minimal spacing as an alternative using the labelPosition property.
A collection of toggles should follow the same pattern within an interface, with a mix of alignments being undesired.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3+ |
|
App (@ovotech/element-native) |
v3+ |
Related
External links