Switch
Last Updated on Dec 14, 2022
Switches are used to change between two states. They emulate physical switches in that the change must happen immediately.
Design Principles
- Use a switch component when they want to give the user a way to toggle between two states, such as on and off, or true and false. The change should happen immediately. If that can’t happen, a checkbox is a better option.
- A switch and a checkbox are similar in that they both make a binary choice. There are a few key differences. A switch is typically used to represent a single option that can be turned on or off, while a checkbox is used to represent multiple options that can be selected independently of one another.
- If the UI requires changing labels, a switch is not the right choice. Use a radio group instead.
- Use a clear and concise label for the switch that describes the option it represents. Strive for either a single verb or a verb and a noun. For example, “Show Totals”, “View Hierarchy”, “Include Splits”, or “Share to Organization” are good labels.
- Use the error state to inform the user if they have attempted to activate the switch when it is not available or if they have encountered any other errors while using it.
Do's and Don'ts
Related Components