Picks one option from a short list of one line text or emoji labels.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/dropdownPlayground
Text
Emoji
Invalid
Pick a category to continue
Disabled
Locked
Content
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/dropdown
Accessibility
- Built from Field and Select, so the label, error and combobox roles come with it.
- Emoji are decorative. The text label is what is read out.
Motion
- The list grows out of the trigger in 180 ms and the highlight glides.
- The chosen row gains a check.
- With reduced motion, the list appears in place.
Responsive behavior
- Full width of its container, with Mobile sizes from Input.
Performance
- A thin wrapper with no state of its own. Field and Select do the work.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Dropdown from @/components/fetaui/dropdown after installing it. label and options are required.
- An option can carry emoji, shown in a 24 px tile. error shows under the field.
- disabled shows lockedLabel beside the label, which defaults to Locked.
- Composes Field and Select. Use Select directly when you need icons or the pill trigger.
Related
SelectComponentChoose one value from a list. The list grows out of the trigger and the highlight glides.FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.ComboboxComponentAn input that filters a list as you type, for one value or many.Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.LabelComponentThe name of a control, tied to it so a click on the label focuses the field.