The toggle is a particular switch between on and off.

General guidelines

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


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.)
Visual guidelines


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.



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.

Component overview

Component overview

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.

Back to top