Best practice
- Use the switch component when choosing an option produce an immediate result e.g. on/off.
- Use a checkbox instead if additional clicks are needed for changes to take effect e.g. if the user has to click “Submit” to apply the changes.
- The legend (or label with a single switch) should describe what to input and not how.
- Use natural language and use the terms that the user would expect.
- Don’t use verbs like enter, add, input etc in the legend/label.
- Don’t add a colon ( : ) at the end of the legend.
- Use the help text to provide additional context and explanation.
We recommend that you read our form design guidelines. The Guidelines cover many basic recommendations to be taken into consideration when working with forms.
Users rely on good and consistent labels when interacting with digital products. See our label guidelines for more information on how to write good labels.
Grouping
By default, the switch group is vertically aligned, but the component also supports a horizontally aligned switch group. Since horizontal groups are more difficult to scan, we always recommend using vertically aligned switch groups wherever possible. Always use the vertical group in forms. Read more about forms and vertical alignment here.
Hint text
Use the hint text to provide information that makes it easier for the user to select the right options. For a single switch, there is no hint text. For a group of switches, the hint text is placed above the switches and below the group label.
For more information on hint text and help in general see our form design guidelines.
Error state
For a group of switches, a red error message is placed above the switches and below the label. Error messages should be clear, concise and provide actionable remedies to resolve the errors.
