Binhlaig UI Component

ComboBox

A searchable input combined with a predefined list of selectable options.

Installation

Initialize Binhlaig UI once, then install ComboBox using the saved installer.

Initialize first

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add combobox

Import

Import the ComboBox primitives you need.

import {
  Combobox,
  ComboboxClear,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxInputGroup,
  ComboboxItem,
  ComboboxItemIndicator,
  ComboboxList,
  ComboboxPopup,
  ComboboxPortal,
  ComboboxPositioner,
  ComboboxTrigger,
} from "@/components/ui/combobox"

Basic

Filter and select from a predefined list.

Controlled Value

Manage the selected option from React state.

Selected: Next.js

Grouped Options

Organize large option lists into readable groups.

Disabled

Disable the complete control when selection is unavailable.

Update or Overwrite

Replace an older ComboBox source with the latest registry version.

npx binhlaig-ui@latest add combobox --overwrite

API Reference

Main primitives available in Binhlaig UI ComboBox.

Component	Purpose
`Combobox`	Controls items, value and open state.
`ComboboxInput`	Filters available options.
`ComboboxTrigger`	Opens or closes the popup.
`ComboboxClear`	Clears the selected option.
`ComboboxPopup`	Floating option container.
`ComboboxList`	Renders available items.
`ComboboxItem`	A selectable option.
`ComboboxItemIndicator`	Marks the selected option.
`ComboboxEmpty`	Shown when filtering has no results.
`ComboboxGroup`	Groups related options.

Previous component

Calendar

All components