# Shadcn Select
> Free shadcn/ui select (dropdown) component for React — grouped & scrollable lists, icons, country picker, React Hook Form validation, controlled value and sizes. Copy or install in one command.
Source: https://designrevision.com/components/select
The **Shadcn Select** is the dropdown for picking **one** value from a list — the canonical shadcn/ui select, a ten-part Radix composition themed entirely with CSS variables. It pairs with a [Label](/components/label) and composes from `SelectTrigger`, `SelectContent`, `SelectItem`, and friends. The examples below cover what you actually build — grouped pickers, icons, country lists, and validated forms.
## When to use — select vs radio vs combobox
Reach for a select when the user picks **one** value and the list is long enough that showing every option inline would crowd the page (roughly 6+). For a handful of always-visible options, a [radio group](/components/radio-group) reads better. When the list is long enough that users need to **filter as they type**, use a combobox. And when they need to choose **several** values, use a multi-select — the select itself is single-choice.
## Grouped and scrollable lists
For long lists, group related options under `SelectLabel` headings inside `SelectGroup`, and divide groups with `SelectSeparator` — exactly the timezone/region pattern. The scroll-up and scroll-down buttons appear automatically when the list is taller than the viewport, and the content is positioned and animated by Radix's popper.
## Controlled value and the empty-value gotcha
The select is controllable with `value` + `onValueChange`, or uncontrolled with `defaultValue`. One sharp edge trips up most developers: a `SelectItem` **cannot** have an empty-string `value` — Radix reserves `""` for the cleared/placeholder state, so `` throws. Give every item a real value; to **clear** the selection, set the `Select` value back to `""` and the placeholder returns. The Controlled example shows this with a clear button.
## React Hook Form
The select drops into React Hook Form: read each field's value into `Select value` and write it back with `setValue` (or `field.onChange`) from `onValueChange`. Pair it with a `zod` `enum` to require a choice, and set `aria-invalid` on the `SelectTrigger` to show the error. The React Hook Form example is a complete, working field.
## Accessibility
Radix gives the select full keyboard support — open with Enter or Space, move with the arrow keys, type to jump to an option, and Escape to close — plus the right ARIA roles. Bind the trigger to a [Label](/components/label) with `htmlFor`/`id`, and link any error text with `aria-describedby`. The trigger's placeholder is muted via `data-[placeholder]` so an unfilled select reads as empty.
## Theming
The select reads your design tokens (`--primary`, `--input`, `--ring`, `--popover`), so it follows your theme — including dark mode — with zero overrides. Any palette produced by a shadcn-compatible theme generator applies automatically.
## Installation
### select
**Install:**
```bash
npx shadcn@latest add @designrevision/select
```
**Dependencies:** @radix-ui/react-select, lucide-react, utils
**Props**
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | string | — | Controlled selected value (on Select). Note: SelectItem cannot have an empty-string value — set the Select value to "" to clear to the placeholder. |
| defaultValue | string | — | Initial value when uncontrolled (on Select). |
| onValueChange | (value: string) => void | — | Fires when the selection changes (on Select). |
| size | 'sm' \| 'default' | default | Trigger height preset (on SelectTrigger). |
**Usage & accessibility:** Ten composable parts: Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, and SelectScroll{Up,Down}Button. Set aria-invalid on SelectTrigger for the error styling.
```tsx
// components/ui/select.tsx
"use client"
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Select({
...props
}: React.ComponentProps) {
return
}
function SelectGroup({
...props
}: React.ComponentProps) {
return
}
function SelectValue({
...props
}: React.ComponentProps) {
return
}
function SelectTrigger({
className,
size = "default",
children,
...props
}: React.ComponentProps & {
size?: "sm" | "default"
}) {
return (
{children}
)
}
function SelectContent({
className,
children,
position = "popper",
...props
}: React.ComponentProps) {
return (
{children}
)
}
function SelectLabel({
className,
...props
}: React.ComponentProps) {
return (
)
}
function SelectItem({
className,
children,
...props
}: React.ComponentProps) {
return (
{children}
)
}
function SelectSeparator({
className,
...props
}: React.ComponentProps) {
return (
)
}
function SelectScrollUpButton({
className,
...props
}: React.ComponentProps) {
return (
)
}
function SelectScrollDownButton({
className,
...props
}: React.ComponentProps) {
return (
)
}
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
}
```
## Examples
### With label
A labelled select with a placeholder — the canonical single-choice dropdown built from `SelectTrigger`, `SelectValue`, and `SelectItem`.
**Install:**
```bash
npx shadcn@latest add @designrevision/select-label-01
```
**Dependencies:** @designrevision/select, label
```tsx
// components/ui/select-label-01.tsx
import { Label } from "@/components/ui/label"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
export default function SelectLabel01() {
return (