Command Palette

Search for a command to run...

Multi Select

shadcn/ui

Multi select allows the user to select multiple options from a list.

import {	Select,	SelectContent,	SelectGroup,	SelectItem,	SelectLabel,	SelectTrigger,	SelectValue,} from "@/registry/optics/multi-select";<Select onValuesChange={(values) => console.log(values)}>	<SelectTrigger variant="raised">		<SelectValue placeholder="Select status" />	</SelectTrigger>	<SelectContent>		<SelectGroup>			<SelectLabel>Status</SelectLabel>			<SelectItem value="ready" color="bg-teal-400">				Ready			</SelectItem>			<SelectItem value="error" color="bg-red-500">				Error			</SelectItem>			<SelectItem value="building" color="bg-amber-400">				Building			</SelectItem>			<SelectItem value="queued" color="bg-gray-200">				Queued			</SelectItem>		</SelectGroup>	</SelectContent></Select>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/multi-select.json

Props

<Select />
Name
Type
onValuesChange
(values: Array<{value: string, checked: boolean}>) => void
onOpenChange
(open: boolean) => void

<SelectTrigger />
Name
Type
className
string
size
"default" | "sm" (default: "default")
variant
"raised" | "ghost" | "outline"
<SelectContent />
Name
Type
className
string
position
"popper" | "item-aligned" (default: "popper")
<SelectItem />
Name
Type
className
string
value
string (required)
color
string (Tailwind color class)
MenubarNavigation Menu