Select/Dropdown Components

Select / Dropdown Form Components

Design accessible select controls (native and custom) with clear states, search, and responsive behavior.

Label, trigger button (or native select), value/placeholder, caret icon, helper text, error text. Padding 12–14px vertical, 14–16px horizontal; border 1px neutral; radius 6–8px. Menu uses shadow-2 and border.

Default/hover/focus with focus ring.

Open: menu anchored to trigger; scrollable with max height.

Error/success: semantic border and message.

Disabled: muted text, no hover; disable caret interaction.

Provide inline search for lists > 12 items. Support empty state and loading. Group options with headers; allow keyboard typing to filter.

Consider async loading for very long lists. Show selected chips inside trigger or summary (“3 selected”). Provide “Select all / Clear all” controls. Keyboard navigation must support selection toggles with space/enter.

Frequently asked questions