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

The Select component lets users choose from a list of options.

SelectContent

The SelectContent component renders select options inside a popover.

SelectItem

The SelectItem component represents one select option.

SelectLabel

The SelectLabel component renders the primary text for a select option.

SelectDescription

The SelectDescription component renders supporting text for a select option.

SelectSection

The SelectSection component groups related select options.

SelectSeparator

The SelectSeparator component separates select option groups.

SelectTrigger

The SelectTrigger component opens the select popover and displays the selected value.

See the React Aria for the full API reference.