Dropdown, Select, default

Updated 2026-05-14

Overview Content Accessibility Code

Confidence anatomy medium variants medium motion high a11y high content high

Overview

Use when there are 5+ options or space is limited. Ideal for selecting one item from a pre-defined list (e.g., Country, State).

Anatomy

Anatomy diagram coming from Figma

1. 1
   Label

   caller-supplied text bound to the control via for/aria-labelledby
2. 2
   Required indicator

   visible asterisk; aria-required carries the semantics
3. 3
   Control

   the input/select/checkbox/radio/toggle element
4. 4
   Helper text

   optional persistent guidance below the control
5. 5
   Validation message

   error/warning/success; replaces helper text when active
6. 6
   Leading icon (optional)

   decorative or semantic hint inside the control
7. 7
   Trailing icon (optional)

   often interactive — clear, reveal, dropdown caret

Variants

Type \ State	Default	Hover	Focus	Active	Filled	Disabled
Default	—	—	—	—	—	—
Search/Multiple	—	—	—	—	—	—
With avatar	—	—	—	—	—	—
Compact/Custom	—	—	—	—	—	—

Motion

State Transitions

Slug: state-transitions

focus-ring fade-in on focus; opacity transition on disabled

Resources

• Open in Figma
• Knowledge source