HeroUI Select

Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disabled options, controlled value, primary/secondary variants, and full keyboard + typeahead support. Compound API: Select / Select.Trigger / Select.Value / Select.Indicator / Select.Popover + ListBox / ListBox.Item / ListBox.ItemIndicator / ListBox.Section / Header / Separator / Label / Description / FieldError.

HUby Hero Ui

Install

npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-select

Loading preview...

"use client"

import { Label, ListBox, Select } from "@/components/ui/heroui-select"

export default function Multiple() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-8">
      <Select
        className="w-[256px]"
        placeholder="Select countries"
        selectionMode="multiple"
      >
        <Label>Countries to Visit</Label>
        <Select.Trigger>
          <Select.Value />
          <Select.Indicator />
        </Select.Trigger>
        <Select.Popover>
          <ListBox>
            <ListBox.Item id="argentina" textValue="Argentina">
              <Label>Argentina</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="venezuela" textValue="Venezuela">
              <Label>Venezuela</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="japan" textValue="Japan">
              <Label>Japan</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="france" textValue="France">
              <Label>France</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="italy" textValue="Italy">
              <Label>Italy</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="spain" textValue="Spain">
              <Label>Spain</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="thailand" textValue="Thailand">
              <Label>Thailand</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="new-zealand" textValue="New Zealand">
              <Label>New Zealand</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
            <ListBox.Item id="iceland" textValue="Iceland">
              <Label>Iceland</Label>
              <ListBox.ItemIndicator />
            </ListBox.Item>
          </ListBox>
        </Select.Popover>
      </Select>
    </div>
  )
}