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

The select component allows the selection of a value among a list.

General guidelines

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 nine.

 

The picture is showing two selects, collapsed and open
Best practices
Good practice about the use of a select.

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

Bad practice about the use of a select and the order of items.

Don’t use a random order.

Good practice about the use of a select.

Use clear and concise label.

Bad practice about the use of a select.

Don’t use labels that are too long.

Good practice about the use of a select.

Always collapsed the select by default. If not it can hide other components.

Bad practice about the use of a select with too long labels.

Don’t hide other components.

Visual guidelines

Interactive States

Select have many states (Default, Hover, Active, Focus, Disabled, FIlled) and Open variants including their own interactive states (Default, Hover, Active, Focus, Disabled).

The picture is showing several selects with different interactive states

Mobile Behaviour

The component will automatically switch to a native behaviour on mobile platforms.

Select3
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