100.5k

Select

PreviousNext

Displays a list of options for the user to pick from—triggered by a button.

Docs API Reference 
import * as React from "react"  import {  Select,  SelectContent,  SelectGroup,  SelectItem,  SelectLabel,  SelectTrigger,  SelectValue, } from "@/components/ui/select"  export function SelectDemo() {  return (  <Select>  <SelectTrigger className="w-[180px]">  <SelectValue placeholder="Select a fruit" />  </SelectTrigger>  <SelectContent>  <SelectGroup>  <SelectLabel>Fruits</SelectLabel>  <SelectItem value="apple">Apple</SelectItem>  <SelectItem value="banana">Banana</SelectItem>  <SelectItem value="blueberry">Blueberry</SelectItem>  <SelectItem value="grapes">Grapes</SelectItem>  <SelectItem value="pineapple">Pineapple</SelectItem>  </SelectGroup>  </SelectContent>  </Select>  ) }

Installation

pnpm dlx shadcn@latest add select

Usage

import {  Select,  SelectContent,  SelectItem,  SelectTrigger,  SelectValue, } from "@/components/ui/select"
<Select>  <SelectTrigger className="w-[180px]">  <SelectValue placeholder="Theme" />  </SelectTrigger>  <SelectContent>  <SelectItem value="light">Light</SelectItem>  <SelectItem value="dark">Dark</SelectItem>  <SelectItem value="system">System</SelectItem>  </SelectContent> </Select>

Examples

Scrollable

import * as React from "react"  import {  Select,  SelectContent,  SelectGroup,  SelectItem,  SelectLabel,  SelectTrigger,  SelectValue, } from "@/components/ui/select"  export function SelectScrollable() {  return (  <Select>  <SelectTrigger className="w-[280px]">  <SelectValue placeholder="Select a timezone" />  </SelectTrigger>  <SelectContent>  <SelectGroup>  <SelectLabel>North America</SelectLabel>  <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>  <SelectItem value="cst">Central Standard Time (CST)</SelectItem>  <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>  <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>  <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>  <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>  </SelectGroup>  <SelectGroup>  <SelectLabel>Europe & Africa</SelectLabel>  <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>  <SelectItem value="cet">Central European Time (CET)</SelectItem>  <SelectItem value="eet">Eastern European Time (EET)</SelectItem>  <SelectItem value="west">  Western European Summer Time (WEST)  </SelectItem>  <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>  <SelectItem value="eat">East Africa Time (EAT)</SelectItem>  </SelectGroup>  <SelectGroup>  <SelectLabel>Asia</SelectLabel>  <SelectItem value="msk">Moscow Time (MSK)</SelectItem>  <SelectItem value="ist">India Standard Time (IST)</SelectItem>  <SelectItem value="cst_china">China Standard Time (CST)</SelectItem>  <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>  <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>  <SelectItem value="ist_indonesia">  Indonesia Central Standard Time (WITA)  </SelectItem>  </SelectGroup>  <SelectGroup>  <SelectLabel>Australia & Pacific</SelectLabel>  <SelectItem value="awst">  Australian Western Standard Time (AWST)  </SelectItem>  <SelectItem value="acst">  Australian Central Standard Time (ACST)  </SelectItem>  <SelectItem value="aest">  Australian Eastern Standard Time (AEST)  </SelectItem>  <SelectItem value="nzst">New Zealand Standard Time (NZST)</SelectItem>  <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>  </SelectGroup>  <SelectGroup>  <SelectLabel>South America</SelectLabel>  <SelectItem value="art">Argentina Time (ART)</SelectItem>  <SelectItem value="bot">Bolivia Time (BOT)</SelectItem>  <SelectItem value="brt">Brasilia Time (BRT)</SelectItem>  <SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>  </SelectGroup>  </SelectContent>  </Select>  ) }