ComboBox

Copy MarkdownOpen

Example

Features

A combo box can be built using the <datalist> HTML element, but this is very limited in functionality and difficult to style. ComboBox helps achieve accessible combo box and autocomplete components that can be styled as needed.

• Flexible – Support for selecting pre-defined values, custom values, controlled and uncontrolled state, custom filter functions, async loading, disabled items, validation, and multiple menu trigger options.
• Keyboard navigation – ComboBox can be opened and navigated using the arrow keys, along with page up/down, home/end, etc. The list of options is filtered while typing into the input, and items can be selected with the enter key.
• Accessible – Follows the ARIA combobox pattern, with support for items and sections, and slots for label and description elements within each item. Custom localized announcements are included for option focusing, filtering, and selection using an ARIA live region to ensure announcements are clear and consistent.
• Validation – Support for native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and server-side validation errors.
• Styleable – Items include builtin states for styling, such as hover, press, focus, selected, and disabled.

Installation

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

npx @libravelui@latest add combobox

Anatomy

import {
  ComboBox,
  ComboBoxRoot,
  ComboBoxInput,
  ComboBoxContent,
  ComboBoxGroup,
  ComboBoxItem,
} from "@/components/ui/core/combobox";

// ComboBox (your simplified wrapper usage)
<ComboBox items={items} placeholder="placeholder here..." />;

// ComboBoxRoot (wrapper for the whole ComboBox)
<ComboBoxRoot label="Label goes here if needed">
  <ComboBoxInput placeholder="Select something..." />
  <ComboBoxContent>
    <ComboBoxGroup title="Group Title (optional)">
      <ComboBoxItem textValue="item-textValue-1">Item Label 1</ComboBoxItem>
      <ComboBoxItem textValue="item-textValue-2">Item Label 2</ComboBoxItem>
    </ComboBoxGroup>

    <ComboBoxItem textValue="item-textValue-3">Item Label 3</ComboBoxItem>
    <ComboBoxItem textValue="item-textValue-4">Item Label 4</ComboBoxItem>
  </ComboBoxContent>
</ComboBoxRoot>;

Another Example

Grouped ComboBox

A ComboBox with custom groupings, allowing structured options using separators, labels, and grouped sections.

Props

Loading types…