Command Palette

Search for a command to run...

Select

shadcn/ui

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

import {	Select,	SelectContent,	SelectGroup,	SelectItem,	SelectLabel,	SelectTrigger,	SelectValue,} from "@/registry/optics/select";<Select>	<SelectTrigger>		<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 https://optics.agusmayol.com.ar/r/select.json

Props

<Select />
Name
Type
value
string
defaultValue
string
onValueChange
(value: string) => void
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
disabled
boolean
name
string
required
boolean

<SelectTrigger />
Name
Type
className
string
size
"default" | "sm" (default: "default")
animation
"colors" | "all" | "none" | "only-scale" (default: "colors")
variant
"raised" | "ghost" | "outline"
disabled
boolean
<SelectValue />
Name
Type
placeholder
string
<SelectContent />
Name
Type
className
string
position
"popper" | "item-aligned" (default: "popper")
side
"top" | "right" | "bottom" | "left"
sideOffset
number
align
"start" | "center" | "end"
alignOffset
number
<SelectItem />
Name
Type
className
string
value
string (required)
disabled
boolean
<SelectLabel />
Name
Type
className
string
<SelectGroup />
Name
Type
className
string
<SelectSeparator />
Name
Type
className
string
Scroll AreaSeparator