Combobox

Combines a text field with a searchable list of options.

Installation

Install Combobox from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/combobox

Usage

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
  ComboboxGroup,
} from "@/components/ui/combobox"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
Combobox	The root component that owns the primary structure and state.
ComboboxInput	Captures or exposes the current value.
ComboboxContent	Contains the primary visible content.
ComboboxList	A composable part of the component anatomy.
ComboboxItem	Represents one option or repeated child.
ComboboxGroup	Groups related items into one logical set.
ComboboxLabel	Provides a visible label for its related control or value.
ComboboxCollection	A composable part of the component anatomy.
ComboboxEmpty	A composable part of the component anatomy.
ComboboxSeparator	Visually and semantically separates related groups.
ComboboxChips	A composable part of the component anatomy.
ComboboxChip	A composable part of the component anatomy.
ComboboxChipsInput	Captures or exposes the current value.
ComboboxTrigger	Controls opening, selection, or disclosure behavior.
ComboboxValue	Displays or exposes the current value.
useComboboxAnchor	Reads or controls the component's shared state.

API Reference

Combobox exports 16 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

Combobox Component
ComboboxInput Component
ComboboxContent Component
ComboboxList Component
ComboboxItem Component
ComboboxGroup Component
ComboboxLabel Component
ComboboxCollection Component
ComboboxEmpty Component
ComboboxSeparator Component
ComboboxChips Component
ComboboxChip Component
ComboboxChipsInput Component
ComboboxTrigger Component
ComboboxValue Component
useComboboxAnchor Hook

Accessibility

Provide Combobox with a visible label or an equivalent programmatic accessible name.
Expose disabled, required, selected, and invalid states through the component API instead of color alone, and keep keyboard focus visible.

Source

Combobox uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Collapsible Command