shadcn.io is not affiliated with official shadcn/ui

Shadcn Select for React

Displays a list of options.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/select.json

npx shadcn@latest add https://kit.dev/r/aria/select.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/select.json

yarn shadcn@latest add https://kit.dev/r/aria/select.json

This component depends on Input Group. Install it first if you haven't already.

Install the following dependencies:

bun add react-aria-components lucide-react

npm install react-aria-components lucide-react

pnpm add react-aria-components lucide-react

yarn add react-aria-components lucide-react

Copy and paste the following code into your project.

components/ui/select.tsx

"use client";

import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
import type React from "react";
import {
  Button as ButtonPrimitive,
  composeRenderProps,
  Header as HeaderPrimitive,
  ListBoxItem as ListBoxItemPrimitive,
  ListBox as ListBoxPrimitive,
  ListBoxSection as ListBoxSectionPrimitive,
  Popover as PopoverPrimitive,
  SearchField,
  Select as SelectPrimitive,
  SelectValue as SelectValuePrimitive,
  Separator as SeparatorPrimitive,
  type ListBoxProps,
  type ListBoxSectionProps as SelectGroupProps,

Update the import paths to match your project setup.

Anatomy

SelectRoot
├── SelectLabel
├── SelectClearTrigger
├── SelectItem
│   ├── SelectItemText
│   ├── SelectItemIndicator
│   └── SelectGroup
│       └── SelectGroupLabel
├── SelectList
├── SelectContent
│   └── SelectPositioner
├── SelectTrigger
│   └── SelectIndicator
└── SelectValue

Usage

import { createListCollection } from "@ark-ui/react/collection";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Blueberry", value: "blueberry" },
];

const collection = createListCollection({ items });

const SelectDemo = () => (
  <Select collection={collection}>
    <SelectTrigger className="w-48">
      <SelectValue placeholder="Select a fruit" />
    </SelectTrigger>
    <SelectContent>
      <SelectGroup>
        {collection.items.map((item) => (
          <SelectItem item={item} key={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectGroup>
    </SelectContent>
  </Select>
);

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.
`ArrowUp`	Move up.
`ArrowDown`	Move down.
`ArrowLeft`	Move left.
`ArrowRight`	Move right.
`Home`	Go to the start.
`End`	Go to the end.

Demos

Align Item

Use data-align-trigger on SelectContent to mirror Base UI alignItemWithTrigger (selected item over the trigger vs edge-aligned).

PreviewCode

Groups

Use SelectGroup, group headings, and SelectSeparator to organize items.

PreviewCode

Scrollable

A select with many items that scrolls.

PreviewCode

Disabled

A disabled select.

PreviewCode

Invalid

Add data-invalid on Field and aria-invalid on SelectTrigger for the error state.

PreviewCode

Rtl

Right-to-left select. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Select

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

defaultSelectedKey?Key | null

isOpen?boolean

onSelectionChange?(key: Key | null) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

className?string

AttributeType

data-slot"select"

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectGroup

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

defaultSelectedKey?Key | null

isOpen?boolean

onSelectionChange?(key: Key | null) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

className?string

AttributeType

data-slot"select-group"

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectValue

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

children?ChildrenOrFunction<T>

defaultSelectedKey?Key | null

isOpen?boolean

onSelectionChange?(key: Key | null) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

style?StyleOrFunction<T>

render?DOMRenderFunction<E, T>

className?string

AttributeType

data-slot"select-value"

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectTrigger

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

defaultSelectedKey?Key | null

isOpen?boolean

onSelectionChange?(key: Key | null) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

className?string

AttributeType

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectContent

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

defaultSelectedKey?Key | null

isOpen?boolean

onSelectionChange?(key: Key | null) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

className?string

AttributeType

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectPopover

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

defaultSelectedKey?Key | null

isOpen?boolean

onSelectionChange?(key: Key | null) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

className?string

AttributeType

data-slot"select-content"

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

CSS variableType

--trigger-anchor-pointstring

--trigger-widthstring

SelectList

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

defaultSelectedKey?Key | null

isOpen?boolean

onSelectionChange?(key: Key | null) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

className?string

AttributeType

data-slot"select-list"

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectInput

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

defaultSelectedKey?Key | null

isOpen?boolean

onClear?() → void

onSelectionChange?(key: Key | null) → void

onSubmit?(value: string) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

className?string

AttributeType

data-slot"select-input-wrapper"

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectLabel

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

defaultSelectedKey?Key | null

isOpen?boolean

onSelectionChange?(key: Key | null) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

className?string

AttributeType

data-slot"select-label"

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectItem

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

defaultSelectedKey?Key | null

isOpen?boolean

onSelectionChange?(key: Key | null) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

className?string

AttributeType

data-slot"select-item"

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectSeparator

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

defaultSelectedKey?Key | null

isOpen?boolean

onSelectionChange?(key: Key | null) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

className?string

AttributeType

data-slot"select-separator"

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectEmpty

PropType

defaultOpen?boolean

onOpenChange?(isOpen: boolean) → void

allowsEmptyCollection?boolean

defaultSelectedKey?Key | null

isOpen?boolean

onSelectionChange?(key: Key | null) → void

selectedKey?Key | null

selectionMode?M

shouldCloseOnSelect?boolean

className?string

AttributeType

data-slot"select-empty"

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string