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.

 

Select1
Best practices
Select02DO

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

Select02DONT

Don’t use a random order.

Select03DO

Use clear and concise label.

Select04DONT

Don’t use labels that are too long.

Select04DO

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

Select03DONT

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

Select2
Responsive behaviours
Select4
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