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

Select

Select is an input allowing you to choose one or more values from a list in a dropdown menu.

Usage

Use Select to allow the selection of a value among a defined list (for example, choosing a country). With it, you can browse all list options when choosing. Opt to use it, if the number of options is higher than four.

Use Multi-select when it is possible to select numerous options in a list. This element resembles a normal selector, but when a choice is made, the latter moves itself into the container as a chip. The dropdown remains open to permit other choices being made. The selected values may be deleted by clicking on the “x” of the chip (see the Chip element)

Select_Usage

Best practices

Select is collapsed by default.

Opt for checkboxes or radios buttons when you have 4 options or less and they must be visible.

Always organize the options logically (alphabetically, incrementally, by order of importance, etc.)

Use clear and concise labels

When possible, propose a preselected option or use a placeholder that encourages selection.

 

Placement

Dropdowns are typically used in forms, modals, or filter panels.

Visual

Appearance

Select dropdowns may have an input label above or to the left.

 

Behavior

Select dropdowns have many states: filled, hover, focus, disabled, expand and expand with selection.

Back to top