Select

Import

import { Select } from "@heroui/react";

Usage

Anatomy

Import the Select component and access all parts using dot notation.

import {Select, Label, Description, Header, ListBox, Separator} from "@heroui/react";

export default () => (
  <Select>
    <Label />
    <Select.Trigger>
      <Select.Value />
      <Select.Indicator />
    </Select.Trigger>
    <Description />
    <Select.Popover>
      <ListBox>
        <ListBox.Item>
          <Label />
          <Description />
          <ListBox.ItemIndicator />
        </ListBox.Item>
        <ListBox.Section>
          <Header />
          <ListBox.Item>
            <Label />
          </ListBox.Item>
        </ListBox.Section>
      </ListBox>
    </Select.Popover>
  </Select>
);

With Description

Multiple Select

With Sections

With Disabled Options

Custom Indicator

Required

Full Width

Variants

The Select component supports two visual variants:

• primary (default) - Standard styling with shadow, suitable for most use cases
• secondary - Lower emphasis variant without shadow, suitable for use in Surface components

In Surface

When used inside a Surface component, use variant="secondary" to apply the lower emphasis variant suitable for surface backgrounds.

Custom Value

Controlled

Controlled Multiple

Controlled Open State

Asynchronous Loading

Disabled

Custom Render Function

Styling

Passing Tailwind CSS classes

import {Select} from "@heroui/react";

function CustomSelect() {
  return (
    <Select className="w-full">
      <Label>State</Label>
      <Select.Trigger className="rounded-lg border bg-surface p-2">
        <Select.Value />
        <Select.Indicator />
      </Select.Trigger>
      <Select.Popover>
        <ListBox>
          <ListBox.Item id="1" textValue="Item 1" className="hover:bg-surface-secondary">
            Item 1
          </ListBox.Item>
        </ListBox>
      </Select.Popover>
    </Select>
  );
}

Customizing the component classes

To customize the Select component classes, you can use the @layer components directive.

Learn more.

@layer components {
  .select {
    @apply flex flex-col gap-1;
  }

  .select__trigger {
    @apply rounded-lg border border-border bg-surface p-2;
  }

  .select__value {
    @apply text-current;
  }

  .select__indicator {
    @apply text-muted;
  }

  .select__popover {
    @apply rounded-lg border border-border bg-surface p-2;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Select component uses these CSS classes (View source styles):

Base Classes

• .select - Base select container
• .select__trigger - The button that triggers the select
• .select__value - The displayed value or placeholder
• .select__indicator - The dropdown indicator icon
• .select__popover - The popover container

Variant Classes

• .select--primary - Primary variant with shadow (default)
• .select--secondary - Secondary variant without shadow, suitable for use in surfaces

State Classes

• .select[data-invalid="true"] - Invalid state
• .select__trigger[data-focus-visible="true"] - Focused trigger state
• .select__trigger[data-disabled="true"] - Disabled trigger state
• .select__value[data-placeholder="true"] - Placeholder state
• .select__indicator[data-open="true"] - Open indicator state

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

• Hover: :hover or [data-hovered="true"] on trigger
• Focus: :focus-visible or [data-focus-visible="true"] on trigger
• Disabled: :disabled or [data-disabled="true"] on select
• Open: [data-open="true"] on indicator

API Reference

Select Props

Select.Trigger Props

Select.Value Props

Select.Indicator Props

Select.Popover Props

RenderProps

When using render functions with Select.Value, these values are provided:

Accessibility

The Select component implements the ARIA listbox pattern and provides:

• Full keyboard navigation support
• Screen reader announcements for selection changes
• Proper focus management
• Support for disabled states
• Typeahead search functionality
• HTML form integration

For more information, see the React Aria Select documentation.