fetaUI
GitHub

Select

Choose one value from a list. The list grows out of the trigger and the highlight glides.

FreeWeb and Mobile3 variantsMotion

Preview

npx shadcn add @fetaui/select
Playground
Align
Apple
Banana
Blueberry
Grapes
Pineapple
Aligned to trigger
Groups
Fruits
Apple
Banana
Blueberry
Vegetables
Carrot
Broccoli
Spinach
Scrollable
North America
Eastern Standard Time
Central Standard Time
Mountain Standard Time
Pacific Standard Time
Alaska Standard Time
Hawaii Standard Time
Europe
Greenwich Mean Time
Central European Time
Eastern European Time
Moscow Standard Time
Western European Time
Irish Standard Time
Asia
India Standard Time
China Standard Time
Japan Standard Time
Korea Standard Time
Indochina Time
Gulf Standard Time
Pacific
Australian Eastern Time
Australian Western Time
New Zealand Time
Fiji Time
Samoa Time
Tonga Time
24 zones
Disabled
Not available in your region yet.
Invalid
Apple
Banana
Blueberry
Choose a fruit to continue.
Multiple
2 chosen. Backspace removes the last one. Open the list and press Enter on a choice to remove it.
Motion
Accessibility
Content
Research
2 selected
Pick the areas to include in the review.
Chips
  • Choosing an accessible accentAva Mitchell · Guide
  • Spring motion cheat sheetJasmine Brooks · Template
  • Reduced motion patternsAva Mitchell · Guide
Properties

Checkout button stalls on older phones

Tapping Pay leaves the spinner running after the card is approved. Reproduced on two devices.

Status
Assignee
Priority
Emma Collins opened this issue#482
Pill
Native
Kind
Icons animation
Invalid
Disabled
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/select

Pill

Inline, with a leading icon. Add !w-auto so it hugs the value.

Invalid
Disabled
Motion

Native

The platform's own control. It ignores multiple, footer and icon.

Invalid
Disabled

Accessibility

  • The trigger is a combobox and the list a listbox.
  • Focus stays on the trigger, which tracks the active option.
  • Native keeps the platform control.

Motion

  • The list grows from the trigger in 180 ms and folds back in 120 ms.
  • The highlight glides between items, and the check pops on select.
  • With reduced motion, the list appears and the highlight jumps.

Responsive behavior

  • 36 px trigger on Web and 44 px on Mobile, with 44 px rows.

Performance

  • The list mounts only while open.
  • Options are flattened in a memo, and keeping the active row in view scrolls the list, never the page.
  • No virtualization: every option renders, so use Combobox for very long lists.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import Select from @/components/fetaui/select. options takes flat options or groups.
  • Single uses value, defaultValue, onValueChange. multiple uses values, defaultValues, onValuesChange.
  • kind="native" keeps the platform control, and ignores multiple, footer and icon.
  • In multiple, remove a chip by pointer, with Backspace on the trigger for the last one, or by opening the list and pressing Enter on it. The trigger describes these keys to screen readers. Chips and Properties in the demo are recipes and save nothing.
/docs/components/select/markdown
PreviousSlider
NextCombobox

Related

ComboboxComponentAn input that filters a list as you type, for one value or many.Radio GroupComponentPick exactly one. A surface circle that fills to an ink disc with a dot.FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.Toggle GroupComponentToggles on one tray, for a single choice or several.