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

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

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

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

Install the following dependencies:

bun add radix-ui lucide-react

npm install radix-ui lucide-react

pnpm add radix-ui lucide-react

yarn add radix-ui lucide-react

Copy and paste the following code into your project.

components/ui/select.tsx

"use client";

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

export const Select = (
  props: React.ComponentProps<typeof SelectPrimitive.Root>
) => <SelectPrimitive.Root data-slot="select" {...props} />;

export const SelectGroup = (
  props: React.ComponentProps<typeof SelectPrimitive.Group>
) => {
  const { className, ...rest } = props;

  return (
    <SelectPrimitive.Group

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

SelectLabel

label

PropType

asChild?boolean

className?string

AttributeType

data-slot"select-label"

data-scope"select"

data-part"label"

data-disabled?string

data-invalid?string

data-readonly?string

data-required?string

SelectTrigger

button

PropType

asChild?boolean

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

valuestring

disabled?boolean

textValue?string

asChild?boolean

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

span

AttributeType

data-scope"select"

data-part"item-text"

data-disabled?string

data-highlighted?string

data-statestring

SelectItemIndicator

div

AttributeType

data-scope"select"

data-part"item-indicator"

aria-hiddenboolean

data-statestring

SelectContent

div

PropType

forceMount?true

onCloseAutoFocus?FocusScopeProps["onUnmountAutoFocus"]

onEscapeKeyDown?DismissableLayerProps["onEscapeKeyDown"]

onPointerDownOutside?DismissableLayerProps["onPointerDownOutside"]

position?"item-aligned" | "popper"

asChild?boolean

className?string

AttributeType

data-slot"select-content"

data-scope"select"

data-part"content"

aria-activedescendantstring

aria-labelledbystring

aria-multiselectablestring

data-activedescendantstring

data-align-trigger?string

data-placementstring

data-sidestring

data-state"open" | "closed"

CSS variableType

--radix-select-content-available-heightstring

--radix-select-content-transform-originstring

--radix-select-trigger-heightstring

--radix-select-trigger-widthstring

Select

div

PropType

asChild?boolean

AttributeType

data-slot"select"

data-scope"select"

data-part"root"

data-invalid?string

data-readonly?string

SelectGroup

PropType

asChild?boolean

className?string

AttributeType

data-slot"select-group"

data-scope"select"

data-part"group"

SelectValue

PropType

placeholder?React.ReactNode

asChild?boolean

AttributeType

data-slot"select-value"

data-scope"select"

data-part"value"

SelectSeparator

PropType

asChild?boolean

className?string

AttributeType

data-slot"select-separator"

data-scope"select"

data-part"separator"

SelectScrollUpButton

PropType

asChild?boolean

className?string

AttributeType

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

data-scope"select"

data-part"scroll-up-button"

SelectScrollDownButton

PropType

asChild?boolean

className?string

AttributeType

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

data-scope"select"

data-part"scroll-down-button"