Status
|
|
Default |
|
Active The scope selector is active but nothing has been selected |
|
|
Hover When the scope selector is hover. |
|
|
Scope open The selection is active and the list of options is open. |
|
|
Scope open > option hover User hovers over an option inside the list. |
|
|
Scope open > rôle select User has chosen an option and re-opens the list of choices. |
|
|
Select close > option selected
The user has chosen an environment. The list of choices was reduced as soon as the user clicked on an item. |
|
|
|
Default |
|
Active The scope selector is active but nothing has been selected |
|
|
Hover When the scope selector is hover. |
|
|
Scope open The selection is active and the list of options is open. |
|
|
Scope open > option hover User hovers over an option inside the list. |
|
|
Scope open > rôle select User has chosen an option and re-opens the list of choices. |
|
|
Select close > option selected
The user has chosen an environment. The list of choices was reduced as soon as the user clicked on an item. |
|
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, ...
Behaviors
How many rows can be displayed?
To enhance the user experience, the number of options displayed when the drop-down list is open is limited to a maximum of 14 visible items, with scrolling required from the 15th onwards.
Disable items
Search
Search Activation:
When the user clicks on the search component, an input field immediately opens, allowing the user to enter their query without any additional steps.
Real-Time Search:
As soon as the user starts typing in the search field, a dynamic search is automatically performed. Results are displayed progressively and sorted alphabetically. Additionally, the entire path or trail leading to each result is displayed, making it easier to navigate through the available options.
|
|
|
|
For the part that will be highlighted, it will be placed directly on the background text.
Responsive
The scope selector can take two different forms depending on the screen format.The scope selector can take two different forms depending on the screen format.
640px and bigger
By default format. We use the anatomy of the select and dropdown components and the behavior documented above.
Less than 640px
Compact format. We use the anatomy of the tertiary icon button in default size. The icon is related to the selection.
The dropdown component is replaced by a drawer.
