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.
|
Active The select is active but nothing has been selected |
|
|
Disabled |
|
|
Hovered When the select is hovered. |
|
|
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 selected 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. |
|
|
Active The select is active but nothing has been selected |
|
|
Disabled |
|
|
Hovered When the select is hovered. |
|
|
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. |
|
|
Warning |
|
|
Select with warning User has to be informed about something. |
|
|
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. |
|
Variants
Without label
This 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, ...
To keep it meaningful, you can use a placeholder and a specific wording like "select a country" or the option you have already selected.
With contextual menu
This variant allows to add a contextual menu in select item to proceed actions on it.
Some status of this variant:
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.
