In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Toggle/Switch

Toggle and switch are elements that allow you to select a value between two options.

Usage

Use the Toggle to activate or deactivate a value.

Use the Switch variable to toggle between two values.

The difference with a checkbox or a radio button is that the Toggle is instantaneous. Its activation or deactivation should create immediate feedback with no need for validation. 

Toggle Switch

Best practices

- Always show values by respecting the law of proximity 

- Use values that are sufficiently clear

- For values prefer 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

 

Placement

The Toggle may be used 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

Visual

Appearance

The Toggle is available in three different sizes: Large, Medium and Small 

 

Behavior

The Toggle is available in two states: On and Off

Toggle Switch Sizes
Back to top