Dropdown

Dropdowns allow users to select a single option from a collapsible list. Used for document types, country selection, and other enumerated choices where a radio group would be too long.

Anatomy

Select country

Closed.dropdown

The field shows the placeholder or the current selection, with a chevron affordance.

Open.dropdown.is-open

The menu lists the options; the selected item is highlighted.

Colombia

Selected.dropdown.has-value

After choosing, the field shows the value in full text color.

Tokens

TokenRoleLayer

--dropdown-surfaceField backgroundComponent

--dropdown-border-defaultBorder — restComponent

--dropdown-border-openBorder — open stateComponent

--dropdown-text-defaultSelected text colorComponent

--dropdown-text-placeholderPlaceholder text colorComponent

--dropdown-chevronChevron icon colorComponent

--radius-dropdownCorner radiusSemantic

Component tokens

The color tokens for this component live in Color → Tokens, and its spacing, radius, and type map to the shared foundation scales.