Select: Multiple

With multiple, the list stays open while you pick, and the value can summarise long selections.

"use client"

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

const labels = ["Bug", "Feature", "Design", "Docs", "Performance"]

export function SelectMultiple() {
  return (
    <Select multiple defaultValue={["Bug", "Design"]}>
      <SelectTrigger aria-label="Labels" className="w-56">
        <SelectValue placeholder="Add labels">
          {(value: string[]) =>
            value.length > 2 ? `${value.length} labels` : value.join(", ")
          }
        </SelectValue>
      </SelectTrigger>
      <SelectContent alignItemWithTrigger={false}>
        {labels.map((label) => (
          <SelectItem key={label} value={label}>
            {label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

Add this example

This adds the example as components/examples/select/multiple.tsx, together with the Select component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/select-multiple.json

To add only the component, follow the Select installation.

Props in this example

The Select props this example sets, from the API reference.

Select

Prop	Type	Default
`defaultValue`	`Value \| Value[] \| null`	`–`
`multiple`	`boolean`	`false`

SelectValue

Prop	Type	Default
`placeholder`	`ReactNode`	`–`

SelectContent

Prop	Type	Default
`alignItemWithTrigger`Open over the trigger with the current option lined up.	`boolean`	`true`

SelectItem

Prop	Type	Default
`value`	`Value`	`–`

Every prop is in the Select API reference.

More Select examples

See them all, with keyboard support and accessibility notes, on the Select page.