Search dropdown menu

Updated 2026-05-19

Overview Content Accessibility Code

Confidence anatomy medium variants medium motion high a11y high content low

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
No result
Before typed
After typed
Explorer home

Motion

State Transitions

Slug: state-transitions

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

Resources

• Open in Figma