Loading...
Loading...
> A dropdown select component for choosing from a list of options.
1import {2 Select,3 SelectContent,4 SelectItem,5 SelectTrigger,6 SelectValue,7} from "@/components/ui/select"
1<Select>2 <SelectTrigger className="w-[200px]">3 <SelectValue placeholder="Select a fruit" />4 </SelectTrigger>5 <SelectContent>6 <SelectItem value="apple">Apple</SelectItem>7 <SelectItem value="banana">Banana</SelectItem>8 <SelectItem value="orange">Orange</SelectItem>9 </SelectContent>10</Select>
1<div className="grid gap-2">2 <Label htmlFor="framework">[FRAMEWORK]:</Label>3 <Select>4 <SelectTrigger id="framework" className="w-[200px]">5 <SelectValue placeholder="Select framework" />6 </SelectTrigger>7 <SelectContent>8 <SelectItem value="next">Next.js</SelectItem>9 <SelectItem value="remix">Remix</SelectItem>10 <SelectItem value="astro">Astro</SelectItem>11 </SelectContent>12 </Select>13</div>
1<Select>2 <SelectTrigger className="w-[200px]">3 <SelectValue placeholder="Select timezone" />4 </SelectTrigger>5 <SelectContent>6 <SelectGroup>7 <SelectLabel>North America</SelectLabel>8 <SelectItem value="est">Eastern Time</SelectItem>9 <SelectItem value="cst">Central Time</SelectItem>10 <SelectItem value="pst">Pacific Time</SelectItem>11 </SelectGroup>12 <SelectGroup>13 <SelectLabel>Europe</SelectLabel>14 <SelectItem value="gmt">GMT</SelectItem>15 <SelectItem value="cet">Central European</SelectItem>16 </SelectGroup>17 </SelectContent>18</Select>
1<Select disabled>2 <SelectTrigger className="w-[200px]">3 <SelectValue placeholder="Disabled" />4 </SelectTrigger>5 <SelectContent>6 <SelectItem value="1">Option 1</SelectItem>7 </SelectContent>8</Select>
1<Select>2 <SelectTrigger className="w-[200px]">3 <SelectValue placeholder="Select role" />4 </SelectTrigger>5 <SelectContent>6 <SelectItem value="admin">Admin</SelectItem>7 <SelectItem value="member">Member</SelectItem>8 <SelectItem value="owner" disabled>Owner (Unavailable)</SelectItem>9 </SelectContent>10</Select>
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | - | The value of the select when initially rendered. |
| value | string | - | Controlled value of the select. |
| onValueChange | (value: string) => void | - | Event handler called when the value changes. |
| disabled | boolean | false | Disable the select. |
| placeholder | string | - | Placeholder text shown when no value is selected. |
✓ Use Select when:
✗ Don't use when:
Best Practices: