Airbus uses cookies (including from third parties) to enhance site navigation and offer you useful features by analysing the site usage. By clicking “accept”, you agree to the use of cookies. For further information, please refer to our cookies policy. Accept

Toggle

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

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

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.

Toggle02

Sizes

The toggle and the switch are available in two different sizes: medium (preferred for mobile) and small (preferred for desktop).

Toggle03
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