Skip to main content

Select Menu

When activated, Select Menus allow users to select a value from a list. Once a value is selected, the Select Menu displays the selected value.

Anatomy
Anatomy Image
  1. Container
  2. Text
  3. Caret Selector
  4. Caret
Anatomy Image
  1. Container
  2. Text
  3. Caret Selector Clickable Space
  4. Caret

Default Values
Attribute Token Value
Container
Padding (Left and Right) select-padding-x-medium 0.5rem
Padding (Top and Bottom) select-padding-y-medium 0.5rem
Border Width select-border-width 1px
Border Radius select-radius 3px
Border Color select-color-border-default #2b659b
Background Color select-color-background #101923
Text
Font Family font-control-body-1-font-family 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
Font Size font-control-body-1-font-size 1rem
Font Weight font-control-body-1-font-weight 400
Line Height font-control-body-1-line-height calc(20 / 16)
Letter Spacing font-control-body-1-letter-spacing 0.005em
Text Color select-color-text #4dacff
Caret Selector
select-caret-selector-width 32px
Background Color select-caret-selector-color-background #1c3f5e
Caret
Dimension select-caret-dimension 30px
Fill Color select-caret-color-fill #4dacff

States

Select Menu
Default select
Hover select
Invalid select
Disabled select
Focus select
Default select
Hover select
Invalid select
Disabled select
Focus select

Default
Attribute Token Value
Container
Border Color select-color-border-default #2b659b

Hover
Attribute Token Value
Container
Border Color select-color-border-hover #92cbff

Invalid
Attribute Token Value
Container
Border Color select-color-border-invalid #ff3838

Disabled
Attribute Token Value
Container
Opacity opacity-disabled 40%

Focus
Attribute Token Value
Container
Outline color-border-focus-default #da9ce7
Border Width border-width-focus-default 1px
Outline Offset spacing-focus-default 0.125rem

Sizes

Select Menu
select Size Small
select Size Medium
select Size Large
select Size Small
select Size Medium
select Size Large

Small
Attribute Token Value
Container
Padding (Left and Right) select-padding-x-small 0.25rem
Padding (Top and Bottom) select-padding-y-small 1rem

Medium
Attribute Token Value
Container
Padding (Left and Right) select-padding-x-medium 0.5rem
Padding (Top and Bottom) select-padding-y-medium 0.5rem

Large
Attribute Token Value
Container
Padding (Left and Right) select-padding-x-large 0.75rem
Padding (Top and Bottom) select-padding-y-large 0.25rem
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel