Select

Basic

A select component displays a dropdown list of options, allowing users to pick one from the list.

Installation

npx shadcn@latest add @intentui/select

Composed components

Manual installation

npm i react-aria-components @heroicons/react

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>

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 Select.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.