Select

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/select

Composed components

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components @heroicons/react tailwind-merge

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

Sometimes, you may need to search for an item in a select component. Here's how you can do it.

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

When the children option is a string, Select.Label will automatically wrap it. However, if the option includes an icon or avatar, you'll need to manually define the wrapper like this:

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

Details description

If you need to provide more information about an option, use the Description component to display additional details.

Controlled

You can control the select component by passing the selectedKey prop.

Uncontrolled

You can uncontrolled the select component by passing the defaultSelectedKey prop.

Disabled

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

Component API

Select

SelectContent

SelectItem

SelectLabel

SelectDescription

SelectSection

SelectSeparator

SelectTrigger