input

Dropdown

A menu revealing a list of selectable options triggered by a click or keyboard interaction.

Dropdowns save space by hiding options until needed. They are appropriate for 5-15 options. Fewer = radio buttons; more = searchable select. Dropdowns should always be triggered by click, never by hover.

Anatomy

  • Trigger (button or field)
  • Panel
  • Items (each with optional icon + label)
  • Dividers (group separators)
  • Search input (for large lists)

Variants

Select dropdown (form control)Menu dropdown (action list)Multi-selectCombo box (type-to-filter)Command palette

States

ClosedOpenItem: default, hover, selected, disabled

Rules

✓ Do

  • •Click to open (not hover)
  • •Escape to close
  • •Arrow keys to navigate
  • •Selected item shows checkmark

✗ Don't

  • ×Don't trigger on hover
  • ×Don't exceed 15 items without search
  • ×Don't clip the panel at viewport edge

AI Prompt

Paste into Claude, Cursor, Bolt, or v0.

Dropdown: click-triggered, below the trigger + 4px gap, 8px radius, elevated shadow, z-index 100. Items: 40px height, 12px padding. Arrow keys navigate. Escape closes. Selected: checkmark + accent.