Select

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/select

Composed components

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components @heroicons/react cn

Anatomy

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
} from "@/components/ui/select"

const software = [
  { id: 1, name: "Adobe Photoshop" },
  { id: 2, name: "Sketch" },
  { id: 3, name: "Figma" },
  { id: 4, name: "Adobe XD" },
  { id: 5, name: "InVision" },
]

<Select aria-label="Design software" placeholder="Select a software">
  <SelectTrigger />
  <SelectContent items={software}>
    {(item) => (
      <SelectItem id={item.id} textValue={item.name}>
        {item.name}
      </SelectItem>
    )}
  </SelectContent>
</Select>

Examples

Section

A select component can display items grouped together in sections.

Searchable select

Use Autocomplete to filter select options as users type.

With icon

With avatar

Multiple select

Enable selecting more than one option by setting selectionMode to multiple.

Validation

If a user submits the form without selecting an item, an error message will appear.

Label

SelectItem wraps string children in SelectLabel automatically. When an item includes an icon or avatar, wrap its label explicitly:

<SelectItem id="discord" textValue="Discord">
  <BrandDiscordIcon />
  <SelectLabel>Discord</SelectLabel>
</SelectItem>

Details description

Use SelectDescription to add supporting text to an option.

Controlled

Pass selectedKey and update it with onSelectionChange to control the selection.

Uncontrolled

Use defaultSelectedKey to set the initial selection of an uncontrolled select.

Disabled

When the select component is disabled, it cannot be interacted with.

Component API

Select

SelectContent

SelectItem

SelectLabel

SelectDescription

SelectSection

SelectSeparator

SelectTrigger