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

Checkbox

A checkbox allows you to select one or several options at a time.

General guidelines 

Use checkboxes to offer the choice of one or numerous options in a short list. The various options proposed in checkboxes are not interdependent.

Checkboxes are mainly used in forms, filter panels, modals and in tables.   

Checkbox01
Best practices
Checkbox04DO

Use checkboxes for choices that are frequent and low in number (ideal from 2 to 4 options).

Checkbox04DONT

Don’t put more than 7 checkboxes together.

Checkbox05DO

Always order the elements vertically in a logical order for the user.

Checkbox05DONT

Don’t use a vertical order, it will break the layout and be longer to read.

Checkbox06DO

Always use explicit and concise labels.

Checkbox06DONT

Don’t use complicated labels.

Checkbox07DO

Add an “other option” field can be added with an associated text field. If it’s not possible to have all the options in the list.

Checkbox07DONT

Never compel the user to choose an option he does not want.

Visual guidelines

Behaviours

Checkboxes have 8 states: Unselected, selected, hover unselected, hover selected, focus unselected, focus selected, disable unselected, disable selected, indeterminate selected.

Intermediate state is used when a value is neither selected or unselected. Example: a parent checkbox showing several checkbox children check but not all of them.

Checkbox02

Sizes

Medium are made for desktop, prefer Large on mobile devices.

Checkbox03
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