Status
The select component can adopt different status depending on user requirements. It is generally embedded in forms, and allows several options to be grouped together in a single component. The select component can be optional and/or mandatory - in which case it will display a different visual to indicate this to the users.
|
|
Default |
|
Active The select is active but nothing has been selected |
|
|
Hover When the select is hover. |
|
|
Select open The selection is active and the list of options is open. |
|
|
Select open > option hover User hovers over an option inside the list. |
|
|
Select open > option select User has chosen an option and re-opens the list of choices. |
|
|
Select close > option selected The user has chosen an option. The list of choices was reduced as soon as the user clicked on an item. |
|
|
Required |
|
|
Select answer required (nothing selected) User has to select an option |
|
|
Select answer required - open The red stroke will stay until an option is selected. |
|
|
Other status |
|
|
Disable |
|
|
Focus The user makes a selection using a keyboard or screen reader. |
|
Variants
Compact select
Compact select has the same status than default one. It inherits of all its behavior as required state, open state, active state, selected state, focus state, ...
The only difference between compact and default selects is the presence of "Label".
Compact select doesn't have "Label". To keep it meaningful, you can use a placeholder and a specific wording like "select a country" or the option you have already selected.
Behavior
To enhance the user experience, the number of options displayed when the dropdown is open is limited to a maximum of 5 visible items. In addition, the 5th option displayed must be cut off, which suggests to the user that more options are available if the scrolls.
In some cases, the options displayed in the dropdown can be supplemented by other information. These will always follow the same structure, i.e. a "title", accompanied by a "description". When the user selects one of the options, only the title appears in the select.
