Anatomy
![Anatomy Image](/img/components/select/select-anatomy.png)
- Container
- Text
- Caret Selector
- Caret
![Anatomy Image](/img/components/select/select-menu-inline-anatomy.webp)
- Container
- Text
- Caret Selector Clickable Space
- Caret
Default Values
Attribute | Token | Value |
---|---|---|
Container | ||
Padding (Left and Right) | select-padding-x-medium | |
Padding (Top and Bottom) | select-padding-y-medium | |
Border Width | select-border-width | |
Border Radius | select-radius | |
Border Color | select-color-border-default | |
Background Color | select-color-background | |
Text | ||
Font Family | font-control-body-1-font-family | |
Font Size | font-control-body-1-font-size | |
Font Weight | font-control-body-1-font-weight | |
Line Height | font-control-body-1-line-height | |
Letter Spacing | font-control-body-1-letter-spacing | |
Text Color | select-color-text | |
Caret Selector | ||
select-caret-selector-width | ||
Background Color | select-caret-selector-color-background | |
Caret | ||
Dimension | select-caret-dimension | |
Fill Color | select-caret-color-fill |
States
Select Menu
![Default select](/img/components/select/select-default.png)
![Hover select](/img/components/select/select-hover.png)
![Invalid select](/img/components/select/select-invalid.png)
![Disabled select](/img/components/select/select-disabled.png)
![Focus select](/img/components/select/select-focus.png)
Inline Select Menu
![Default select](/img/components/select/select-menu-inline-default-state.webp)
![Hover select](/img/components/select/select-menu-inline-hover-state.webp)
![Invalid select](/img/components/select/select-menu-inline-invalid-state.webp)
![Disabled select](/img/components/select/select-menu-inline-disabled-state.webp)
![Focus select](/img/components/select/select-menu-inline-focus-state.webp)
Default
Attribute | Token | Value |
---|---|---|
Container | ||
Border Color | select-color-border-default |
Hover
Attribute | Token | Value |
---|---|---|
Container | ||
Border Color | select-color-border-hover |
Invalid
Attribute | Token | Value |
---|---|---|
Container | ||
Border Color | select-color-border-invalid |
Disabled
Attribute | Token | Value |
---|---|---|
Container | ||
Opacity | opacity-disabled |
Focus
Attribute | Token | Value |
---|---|---|
Container | ||
Outline | color-border-focus-default | |
Border Width | border-width-focus-default | |
Outline Offset | spacing-focus-default |
Sizes
Select Menu
![select Size Small](/img/components/select/select-small.png)
![select Size Medium](/img/components/select/select-medium.png)
![select Size Large](/img/components/select/select-large.png)
Inline Select Menu
![select Size Small](/img/components/select/select-menu-inline-small-size.webp)
![select Size Medium](/img/components/select/select-menu-inline-medium-size.webp)
![select Size Large](/img/components/select/select-menu-inline-large-size.webp)
Small
Attribute | Token | Value |
---|---|---|
Container | ||
Padding (Left and Right) | select-padding-x-small | |
Padding (Top and Bottom) | select-padding-y-small |
Medium
Attribute | Token | Value |
---|---|---|
Container | ||
Padding (Left and Right) | select-padding-x-medium | |
Padding (Top and Bottom) | select-padding-y-medium |
Large
Attribute | Token | Value |
---|---|---|
Container | ||
Padding (Left and Right) | select-padding-x-large | |
Padding (Top and Bottom) | select-padding-y-large |