Dropdown

Ready

The use of dropdowns has its advantages but it depends on the screen support. Dropdowns are a standard widget, so the users know how to interact with them. The options available in a dropdown component are static, preventing erroneous data entered by the user since it only shows a range of correct values for that input.

Code

Usage

Specifications

States

States: Enabled, hover, focus, active and disabled.

Option list

States: Enabled, hover, focus and selected.

Design tokens

Color

Token	Value
`backgroundColor`	#FFFFFF
`fontColor`	#000000
`dropdownBackgroundColor`	#FFFFFF
`dropdownFontColor`	#000000
`hoverBackgroundOption`	#F2F2F2
`hoverBackgroundColor`	#F2F2F2
`scrollBarThumbColor`	#666666
`scrollBarTrackColor`	#D9D9D9
`focusColor`	#005FCC

Width

Token	Value
`small`	60px
`medium` (default)	240px
`large`	480px
`fitContent`	-
`fillParent`	-

Margin

Token	Value
`xxsmall`	6px
`xsmall`	16px
`small`	24px
`medium`	36px
`large`	48px
`xlarge`	64px
`xxlarge`	100px

Padding

Property	Element	Value
`padding-left`	Dropdown button	16px
`padding-left`	Options list	16px
`padding-right`	Dropdown button	16px
`padding-right`	Options list	16px

Border

Property	Element	Core token	Value
`border-width`	Dropdown button	`border-width-0`	0
`border-style`	Dropdown button	`border-style-none`	none
`border-radius`	Dropdown button	`border-radius-medium`	0.25rem / 4px
`border-width`	Options list	`border-width-0`	0
`border-style`	Options list	`border-style-none`	none
`border-radius`	Options list	`border-radius-medium`	0.25rem / 4px
`border-width`	Focus outline	`border-width-2`	2px
`border-style`	Focus outline	`border-style-solid`	solid
`border-radius`	Focus outline	`border-radius-medium`	0.25rem / 4px