Select
unreleasedstable
A listbox-backed control for choosing one value from a set of options.
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
export function Component() {
return (
<Select>
<SelectTrigger>
<SelectValue placeholder="Choose a framework" />
</SelectTrigger>
<SelectContent>
<SelectItem value="solid">Solid</SelectItem>
</SelectContent>
</Select>
);
}Select
Root owner for selected value, popup state, and listbox coordination.
SelectTrigger
Button trigger that displays the current value and opens the listbox.
SelectValue
Current selected item text or placeholder.
SelectContent
Portaled popup surface containing the listbox.
SelectItem
Selectable option with indicator and text parts.