Select

PreviousNext

A styled dropdown select built on React Aria Select.

Component select-basic not found in registry.

Component select-sizes not found in registry.

Component select-with-icons not found in registry.

Component select-with-label-hint not found in registry.

Component select-variant-compact not found in registry.

Component select-variant-inline not found in registry.

Component select-variant-compact-for-input not found in registry.

Component select-error not found in registry.

Component select-disabled not found in registry.

Installation

pnpm dlx shadcn@latest add select

Usage

import * as Select from "@/registry/react-aria/ui/select"
 
export default function Example() {
  return (
    <Select.Root>
      <Select.Trigger className="min-w-56 rounded-lg px-3 py-2">
        <Select.Value />
      </Select.Trigger>
      <Select.Content>
        <Select.Item id="one">One</Select.Item>
        <Select.Item id="two">Two</Select.Item>
        <Select.Item id="three">Three</Select.Item>
      </Select.Content>
    </Select.Root>
  )
}

Examples

Sizes

The Select component supports three sizes: xsmall, small, and medium (default).

<Select.Root size="small">
  <Select.Trigger>
    <Select.Value />
  </Select.Trigger>
  <Select.Content>
    <Select.Item id="option1">Option 1</Select.Item>
  </Select.Content>
</Select.Root>

With Icons

import { Settings, User } from "lucide-react"
 
;<Select.Root>
  <Select.Trigger>
    <Select.TriggerIcon as={User} />
    <Select.Value />
  </Select.Trigger>
  <Select.Content>
    <Select.Item id="admin">
      <Select.ItemIcon as={Settings} />
      Administrator
    </Select.Item>
  </Select.Content>
</Select.Root>

Variants

Compact Variant

<Select.Root variant="compact">
  <Select.Trigger>
    <Select.Value />
  </Select.Trigger>
  <Select.Content>
    <Select.Item id="option1">Option 1</Select.Item>
  </Select.Content>
</Select.Root>

Inline Variant

<div className="flex items-center gap-2">
  <span>Sort by:</span>
  <Select.Root variant="inline">
    <Select.Trigger>
      <Select.Value />
    </Select.Trigger>
    <Select.Content>
      <Select.Item id="name">Name</Select.Item>
      <Select.Item id="date">Date</Select.Item>
    </Select.Content>
  </Select.Root>
</div>

With Input (compactForInput)

import * as Input from "@/registry/react-aria/ui/input"
 
;<div className="flex items-center gap-2">
  <Input.Root placeholder="Enter amount" className="flex-1" />
  <Select.Root variant="compactForInput">
    <Select.Trigger>
      <Select.Value />
    </Select.Trigger>
    <Select.Content>
      <Select.Item id="usd">USD</Select.Item>
      <Select.Item id="eur">EUR</Select.Item>
    </Select.Content>
  </Select.Root>
</div>