The difference with a checkbox or a radio button is that the toggle is instantaneous.
The activation or deactivation of a toggle should create immediate feedback with no need for validation.
Best practices
- Use the switch variable to toggle between two values
- For values, use descriptive short titles rather than phrases
- Use an element of the same size in the same section (e.g.: a notification panel)
- Do not add button to validate the choices
Toggle
The toggle is a particular switch between on and off.Use the toggle to activate or deactivate a value, in the following instances, for example:
- a form, a list or a table, in order to choose a value
- a notification panel to activate/deactivate a notification
- a filtering section activate/deactivate a filter
- a list of settings or parameters
- a change of mode with instant effect (light/dark, plane mode etc.)
Behaviours
The toggle and switch are available in two states: on and off. (which can be both focus and disable)
They are available in light and in dark.
Sizes
The toggle and the switch are available in two different sizes: medium (preferred for mobile) and small (preferred for desktop).
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.