Select

A dropdown menu for choosing one option from a list..

Docs
select-demo.tsx
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select"
 
export function SelectDemo() {
	return (
		<div className="w-80">
			<Select>
				<SelectTrigger>
					<SelectValue placeholder="Select a fruit" />
				</SelectTrigger>
				<SelectContent>
					<SelectItem value="apple">Apple</SelectItem>
					<SelectItem value="banana">Banana</SelectItem>
					<SelectItem value="cherry">Cherry</SelectItem>
				</SelectContent>
			</Select>
		</div>
	)
}

Installation

npx shadcn@latest add https://9ui.dev/r/select

Usage

Imports
import {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select"
Anatomy
<Select>
	<SelectTrigger>
		<SelectValue />
	</SelectTrigger>
	<SelectContent>
		<SelectGroup>
			<SelectGroupLabel />
			<SelectItem />
		</SelectGroup>
	</SelectContent>
</Select>

Examples

Custom value

select-with-custom-value.tsx
import { useState } from "react"
import Image from "next/image"
 
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select"
 
const users = {
	"karen-smith": {
		name: "Karen Smith",
		image: "/memoji-1.png",
	},
	"chris-williams": {
		name: "Chris Williams",
		image: "/memoji-3.png",
	},
	"melissa-johnson": {
		name: "Melissa Johnson",
		image: "/memoji-2.png",
	},
	"frank-lee": {
		name: "Frank Lee",
		image: "/memoji-4.png",
	},
}
 
export function SelectWithCustomValue() {
	const [selected, setSelected] = useState<keyof typeof users | null>(null)
 
	return (
		<div className="w-80">
			<Select value={selected} onValueChange={setSelected}>
				<SelectTrigger>
					<SelectValue>
						{() =>
							selected ? (
								<div className="flex items-center gap-2">
									<Image
										src={users[selected].image}
										alt={users[selected].name}
										width={16}
										height={16}
									/>
									{users[selected].name}
								</div>
							) : (
								"Assign to"
							)
						}
					</SelectValue>
				</SelectTrigger>
				<SelectContent>
					{Object.entries(users).map(([id, user]) => (
						<SelectItem key={id} value={id}>
							<div className="flex items-center gap-2">
								<Image
									src={user.image}
									alt={user.name}
									width={16}
									height={16}
								/>
								{user.name}
							</div>
						</SelectItem>
					))}
				</SelectContent>
			</Select>
		</div>
	)
}

With groups

select-with-groups.tsx
import {
	Select,
	SelectContent,
	SelectGroup,
	SelectGroupLabel,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select"
 
export function SelectWithGroups() {
	return (
		<div className="w-80">
			<Select>
				<SelectTrigger>
					<SelectValue placeholder="Select an option" />
				</SelectTrigger>
				<SelectContent>
					<SelectGroup>
						<SelectGroupLabel>Fruits</SelectGroupLabel>
						<SelectItem value="apple">Apple</SelectItem>
						<SelectItem value="banana">Banana</SelectItem>
						<SelectItem value="cherry">Cherry</SelectItem>
					</SelectGroup>
					<SelectGroup>
						<SelectGroupLabel>Vegetables</SelectGroupLabel>
						<SelectItem value="carrot">Carrot</SelectItem>
						<SelectItem value="potato">Potato</SelectItem>
						<SelectItem value="tomato">Tomato</SelectItem>
					</SelectGroup>
				</SelectContent>
			</Select>
		</div>
	)
}