Select
A dropdown for choosing a single option from a list.
Overview
A select presents a list of options in a dropdown and lets the user choose one.
Group related options with SelectGroup and label them with SelectLabel.
$ npx morpha-ui add selectExamples
With groups
Disabled
Installation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add select. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add selectAPI Reference
The table below documents the Select root. The composition parts —
SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel,
SelectItem, and SelectSeparator — forward their underlying Radix props.
Prop
Type
Accessibility
- Place each
SelectIteminside aSelectGroup; label groups withSelectLabel. - Give the trigger a visible or associated label so the control's purpose is clear.
- Keyboard navigation (arrows, type-ahead, Esc) is handled natively by Radix.
The dropdown content is rendered in a portal on document.body, so inside the
preview it follows the site theme rather than the frame's light/dark toggle.