Dimensions
Its size characterizes a select. Each element is described below.
Trigger
Height
- Medium with 36px height
- As the default size, the medium trigger should work in most cases.
- Small with 30px height
- Ideal for dense interfaces. Only use this when you really need to squeeze.
Width
- The width of the trigger is optional.
- The minimum width is 180 px, but specific use cases can change it.
List
Height
- The height of the list is flexible and depends on the content.
- The maximum height is 360 px.
Width
- The width of the list is equal to the width of the trigger.
- Note: this works for the list only. If there is a menu with sections, it should be out of the trigger.
Padding
- There’s a padding of 12 px from each side.
- If a visible scrollbar is part of the list:
- It's located on the right (without any padding), and the padding between an item and a scrollbar is 12 px.
- The padding on the bottom should be 0 px to indicate the list goes on.
Item
- There’s a padding of 9 px from each side.
States
Select is represented by states helping a user to understand the action he can provide.
Trigger
|
State |
Description |
|
Enabled |
The default state of the trigger element. Trigger in this state allows users to click on it to show a list of items to provide a selection.
|
|
Hover |
A trigger is in a hover state when the user's cursor is on it, but they haven't clicked on it yet.
|
|
Focused |
A focused state communicates when a user has highlighted an element using a keyboard or mouse.
|
|
Opened |
An opened state communicates when a user has opened an element using a keyboard or mouse.
|
|
Disabled |
The trigger is disabled, indicating an option exists but is unavailable given the circumstances.
This can maintain the layout's continuity and communicate that action may become available.
Add an explanatory tooltip to inform the user why the trigger is disabled.
|
|
Error |
An error state communicates a user or system mistake.
|
|
Selected
|
The state after a user selects a value.
Users can reset the selection by clicking on the cross icon.
|
Item