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/base/select.json

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

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

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

Install the following dependencies:

bun add @base-ui/react lucide-react

npm install @base-ui/react lucide-react

pnpm add @base-ui/react lucide-react

yarn add @base-ui/react lucide-react

Copy and paste the following code into your project.

components/ui/select.tsx

"use client";

import { Select as SelectPrimitive } from "@base-ui/react/select";
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
import type React from "react";
import { cn } from "@/lib/utils";

export const Select = SelectPrimitive.Root;

export const SelectGroup = (props: SelectPrimitive.Group.Props) => {
  const { className, ...rest } = props;

  return (
    <SelectPrimitive.Group
      className={cn("cn-select-group", className)}
      data-slot="select-group"
      {...rest}
    />

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

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectPositioner

div

PropType

alignItemWithTrigger?boolean

AttributeType

data-scope"select"

data-part"positioner"

CSS variableType

--anchor-widthstring

--available-heightstring

--transform-originstring

SelectTrigger

button

PropType

children?React.ReactNode

disabled?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"select-trigger"

data-scope"select"

data-part"trigger"

aria-controlsstring

aria-expandedstring

aria-haspopup"listbox"

aria-invalidstring

aria-labelledbystring

aria-requiredstring

data-disabled?string

data-invalid?string

data-placeholder-shown?string

data-placementstring

data-readonly?string

data-sidestring

data-size?string

data-state"open" | "closed"

role"combobox"

type"button"

SelectItem

div

PropType

children?React.ReactNode

disabled?boolean

label?string

value?any

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"select-item"

data-scope"select"

data-part"item"

aria-disabledstring

aria-selectedboolean

data-disabled?string

data-highlighted?string

data-statestring

data-valueboolean

role"option"

SelectItemText

div

AttributeType

data-scope"select"

data-part"item-text"

data-disabled?string

data-highlighted?string

data-statestring

SelectItemIndicator

span

PropType

children?React.ReactNode

keepMounted?boolean

AttributeType

data-scope"select"

data-part"item-indicator"

aria-hiddenboolean

data-statestring

SelectList

div

AttributeType

data-scope"select"

data-part"list"

aria-activedescendantstring

aria-labelledbystring

aria-multiselectablestring

CSS variableType

--anchor-widthstring

--available-heightstring

--transform-originstring

SelectGroup

div

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"select-group"

data-scope"select"

data-part"group"

SelectValue

span

PropType

children?React.ReactNode | ((value: any) → React.ReactNode)

placeholder?React.ReactNode

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"select-value"

data-scope"select"

data-part"value"

SelectContent

div

PropType

children?React.ReactNode

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"select-content"

data-scope"select"

data-part"popup"

data-align-trigger?string

CSS variableType

--anchor-widthstring

--available-heightstring

--transform-originstring

SelectLabel

div

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"select-label"

data-scope"select"

data-part"group-label"

SelectSeparator

div

PropType

orientation?Orientation

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"select-separator"

data-scope"select"

data-part"separator"

SelectScrollUpButton

div

PropType

keepMounted?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"select-scroll-up-button"

data-scope"select"

data-part"scroll-up-arrow"

SelectScrollDownButton

div

PropType

keepMounted?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"select-scroll-down-button"

data-scope"select"

data-part"scroll-down-arrow"