Switch β
A switch allow users to enter data by making a selection between two distinct and opposite states, such as βOnβ and βOffβ.
Usage guidelines β
When to use β
Switches can be used in forms, in filter menus, or as standalone elements (e.g. switch from dark to light mode on a interface). In general:
- Use switch when the selection has to be made between two distinct and opposite states, such as βOnβ and βOffβ.
Writing guidelines β
Labels:
- Switch typically include a label. Although the length of the label can vary according to the context, always keep it concise and direct.
Capitalization and case: Write labels in sentence case and without punctuation.
Text overflow: In case of overflow, text wraps to another line.
Specifications β
Anatomy β
- Switch input: Indicates wether an option is activated or not and its state.
- Switch label: Describes the option to activate or deactivate.
Size β
Switches come in one size.
Styling β
Switch is available for both dark and light theme.
Two styling variants are available: βShapeβ and βOutlinedβ. Take into account factors such as contrast with the background and balance with other elements of the UI when choosing the variant to use.
Styling for this component also depends on whether items are selected or unselected.
Behavior β
Alignment β
Switches are always aligned to the left of the label.
Interaction β
Apart from being selected, unselected or indeterminate, switches come in five possible states: inactive hover, focused, disabled and error.
Switches always have a default value. The effect of the selection does not require further confirmation from the user and it is immediately applied.
To select or deselect an option, simply press on the input or label.
Accessibility guidelines β
Design considerations β
Make sure there is enough contrast between selection controls color and the background.
For a more accessible experience:
- Keep labels concise and direct.
- Consider adding group titles and helper text to provide additional information. - Keep in mind that if you decide to not show the label, one is always needed in code anyway.
- List option in a logical way.