Anatomy
Desktop
|
Item |
Name |
Description |
Component |
Optional? |
|---|---|---|---|---|
|
1 |
Label |
Indicates what content the user needs to enter in the field. |
|
|
|
2 |
Required marker |
Shows that entering data is mandatory to proceed. |
|
Yes |
|
3 |
Select field |
The container where the user’s selection is displayed. |
|
|
|
4 |
Help icon |
Provides extra, non-essential information to guide the user. |
Yes |
|
|
5 |
Start Slot |
A visual element that adds context to the Select field or selected option. |
|
Yes |
|
6 |
Hint text |
Offers guidance to help users input the correct data. |
|
Yes |
|
7 |
Placeholder |
Gives examples of the content format. |
|
Yes |
|
8 |
Suffix |
Displays fixed content like units. |
|
Yes |
|
9 |
Expand Button |
Opens and closes the Dropdown. |
|
|
|
10 |
Value |
Shows the user's selected option. |
|
|
|
11 |
Clear Button |
Resets the selection by removing the selected options. |
|
|
|
12 |
Searchable Field |
When the field is active, this allows users to search and filter options within the list. |
|
|
|
13 |
Dropdown |
The container that displays the list of selectable options. |
|
|
|
14 |
Group Label |
Labels a group of items within the list. It appears only when the Dropdown group option is enabled. |
|
Yes |
|
15 |
Dropdown Item |
Represents an option in the list. The Single Select variant shows a Selected Icon to indicate the choice. |
|
|
|
16 |
Dropdown Item Title |
The main text content of the Dropdown. |
|
|
|
17 |
Dropdown Item Description |
Provides additional, non-critical information for a Dropdown Item. |
|
|
|
18 |
Divider |
Visually separates groups within the Dropdown. It appears only when the Dropdown group option is enabled. |
|
|
|
Item |
Name |
Description |
Component |
Optional? |
|---|---|---|---|---|
|
1 |
Label |
Indicates what content the user needs to enter in the field. |
|
|
|
2 |
Required marker |
Shows that entering data is mandatory to proceed. |
|
Yes |
|
3 |
Select field |
The container where the user’s selection is displayed. |
|
|
|
4 |
Help icon |
Provides extra, non-essential information to guide the user. |
Yes |
|
|
5 |
Start Slot |
A visual element that adds context to the Select field or selected option. |
|
Yes |
|
6 |
Hint text |
Offers guidance to help users input the correct data. |
|
Yes |
|
7 |
Placeholder |
Gives examples of the content format. |
|
Yes |
|
8 |
Expand Button |
Opens and closes the Dropdown. |
|
|
|
9 |
Chip |
Represents one or more selected options. |
|
|
|
10 |
Overflow Indicator |
Displays the number of selected choices that won’t fit in the Field. |
|
|
|
11 |
Clear Button |
Resets the selection by removing the selected options. |
|
|
|
12 |
Searchable Field |
When the field is active, this allows users to search and filter options within the list. |
|
|
|
13 |
Dropdown |
The container that displays the list of selectable options. |
|
|
|
14 |
Select All |
Allows users to select all items in the list at once. |
|
|
|
15 |
Group Label |
Labels a group of items within the list. It appears only when the Dropdown group option is enabled. |
|
Yes |
|
16 |
Dropdown Item |
Represents an option in the list. The Multiselect variant uses checkboxes to allow multiple selections. |
|
|
|
17 |
Dropdown Item Title |
The main text content of the Dropdown. |
|
|
|
18 |
Dropdown Item Description |
Provides additional, non-critical information for a Dropdown Item. |
|
|
|
19 |
Divider |
Visually separates groups within the Dropdown. It appears only when the Dropdown group option is enabled. |
|
|
Mobile
On mobile, the Active state adapts to display its content inside a Drawer.
|
Item |
Name |
Description |
Component |
Optional? |
|---|---|---|---|---|
|
1 |
Label |
The field label is replicated in the mobile view to maintain context while selecting an option. |
|
|
|
2 |
Search Input |
Allows users to search and filter options within the list, similar to the desktop variant. |
Yes |
|
|
3 |
Drawer |
It holds the dropdown content. |
|
Specifications and properties
Sizing and spacing
|
Property |
Value |
Token |
|---|---|---|
|
align-items |
center |
|
|
gap |
4px |
spacing.50 |
|
Variant |
Size |
Property |
Value |
Token |
|---|---|---|---|---|
|
Compact: true |
- |
align-items |
center |
|
|
|
- |
gap |
4px |
spacing.50 |
|
Compact: false |
- |
align-items |
center |
|
|
|
- |
gap |
4px |
spacing.50 |
|
|
Small |
min-height |
32px |
sizing.400 |
|
|
Medium |
min-height |
40px |
sizing.500 |
|
|
Large |
min-height |
48px |
sizing.600 |
|
|
Extra large |
min-height |
56px |
sizing.700 |
Dropdown
|
Element |
Property |
Value |
Token |
|---|---|---|---|
|
Dropdown |
min-height |
500px (default) |
|
|
|
padding |
8px |
spacing.100 |
|
Select All |
margin-bottom |
8px |
spacing.100 |
|
Dropdown Group |
padding-top |
8px |
spacing.100 |
|
|
gap |
4px |
spacing.50 |
|
|
height |
auto |
|
|
Element |
Property |
Value |
Token |
|---|---|---|---|
|
Dropdown |
padding-left padding-right |
16px |
spacing.200 |
|
Label |
margin-bottom |
8px |
spacing.100 |
|
Field |
margin-bottom |
16px |
spacing.200 |
|
Select All |
margin-bottom |
8px |
spacing.100 |
|
Dropdown Group |
padding-top |
8px |
spacing.100 |
|
|
gap |
4px |
spacing.50 |
|
|
height |
auto |
|
Dropdown item
|
Variant |
Property |
Value |
Token |
|---|---|---|---|
|
Small |
min-height |
32px |
sizing.400 |
|
Medium |
min-height |
40px |
sizing.500 |
|
Large |
min-height |
48px |
sizing.600 |
|
Extra large |
min-height |
56px |
sizing.700 |
|
- |
padding-left padding-right |
12px |
spacing.150 |
|
- |
padding-top padding-bottom |
8px |
spacing.100 |
|
- |
gap |
8px |
spacing.100 |
|
Property |
Value |
Token |
|---|---|---|
|
padding-left padding-right |
12px |
spacing.150 |
|
min-height |
56px |
sizing.700 |
|
padding-top padding-bottom |
8px |
spacing.100 |
|
gap |
16px |
spacing.200 |
States
Dropdown Item
|
Item |
State |
|---|---|
|
1 |
Default |
|
2 |
Hover |
|
3 |
Active |
|
4 |
Disabled |
|
Item |
State |
|---|---|
|
1 |
Default |
|
2 |
Hover |
|
3 |
Active |
|
4 |
Disabled |