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.   

You can see a list of five checkbox with his label.

Best practices

  • Use checkbox for choices that are frequent and low in number (from 2 to 4 options).
  • Opt for a Combo box when the option list is too significant, or if you have limited space.
  • Opt for the Toggle if there is only one option, or an on/off mode of the same value.
  • Prefer a vertical layout of the various options so the user takes less time to look for them. Put the elements in a logical order for the user, or in relation to the context.
  • Always use explicit and concise labels.
  • If it’s possible to have no choice selected, allow the user to uncheck all the options. If that is not possible, display an error message next to the label after the user has validated his choices.
  • If it’s not possible to have all the options in the list, use “Other option” with an associated text field.
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.

You can see all the different states of the component checkbox: unselected, selected, hover unselected, hover selected, focus unselected, focus selected, disable unselected and disable selected.

Sizes

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

You can see two checkbox with a different size: a large checkbox with a width of 24 pixels and a medium checkbox with a width of 16 pixels.
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