Geist Design System

Select

Display a dropdown list of items.

Sizes

Prefix and suffix

Disabled

Error

Label

Best Practices
  • Pick <Select> for short, fixed lists (under ~10 items) where typing adds nothing; switch to Combobox once filtering helps.
  • Use MultiSelect when more than one value can be chosen at once; use Switch for a 2–3 option segmented choice.
  • Group options past ~10 items with native <optgroup>; Geist <Select> has no .Group static.
  • Options are Title Case when short and match canonical branding (Next.js, not NextJS); keep the same register across the list.
  • Label is a short Title Case noun (Framework, Region); accept the prop directly on <Select>.
  • Placeholder is action-oriented (Select a framework), never Choose one…, Pick, or the label restated.
  • Validate on blur and pass a string to error; messages name the field and end in a period (Select a framework.).
  • Don’t wrap a labelled <Select> in a Tooltip; put the hint on a sibling icon button so the label stays announced.