Select
A themed dropdown for choosing one option.
Single select
A themed dropdown built on the Base UI Select.
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui";
const fruits = [
{ label: "Gala", value: "gala" },
{ label: "Fuji", value: "fuji" },
{ label: "Pink Lady", value: "pink-lady" },
];
<Select items={fruits}>
<SelectTrigger>
<SelectValue placeholder="Pick an apple" />
</SelectTrigger>
<SelectContent>
{fruits.map((fruit) => (
<SelectItem key={fruit.value} value={fruit.value}>
{fruit.label}
</SelectItem>
))}
</SelectContent>
</Select>