Inline Select

Usage

Anatomy

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

import {InlineSelect} from "@heroui-pro/react";

<InlineSelect>
  <InlineSelect.Indicator />
  <InlineSelect.Trigger />
  <InlineSelect.Value />
  <InlineSelect.Popover />
</InlineSelect>

Team Switcher

Custom Indicator

Multi Select

Placements

CSS Classes

Base Classes

• .inline-select - Root wrapper with custom properties

Element Classes

• .inline-select__trigger - Ghost-styled trigger button (overrides HeroUI Select field styles)
• .inline-select__value - Displayed text of the selected item(s)
• .inline-select__indicator - Inline chevron icon (static positioning instead of absolute)
• .inline-select__popover - Dropdown panel

Interactive States

• Hover: :hover or [data-hovered="true"] on .inline-select__trigger (text color change)
• Focus visible: :focus-visible or [data-focus-visible="true"] on .inline-select__trigger (focus ring)
• Disabled: :disabled or [aria-disabled="true"] on .inline-select__trigger (reduced opacity)
• Open: [data-open="true"] on .inline-select__indicator

CSS Variables

• --inline-select-value-max-width - Max width of the value text (default: 12rem)
• --inline-select-indicator-size - Size of the indicator icon (default: 0.75rem)

API Reference

InlineSelect

The root component. Wraps the HeroUI Select with ghost styling for inline use.

Also supports all HeroUI Select props.

InlineSelect.Trigger

Ghost-styled trigger button.

Also supports all HeroUI Select.Trigger props.

InlineSelect.Value

Displayed text of the selected item(s), truncated.

Also supports all HeroUI Select.Value props.

InlineSelect.Indicator

Chevron icon. Defaults to a ChevronsExpandVertical icon when no children are provided.

Also supports all HeroUI Select.Indicator props.

InlineSelect.Popover

Dropdown panel for selection options.

Also supports all HeroUI Select.Popover props.