Combobox

Alpha

An accessible autocomplete/combobox with filtering, keyboard navigation, and compound component API.

Import

import { Combobox } from "@compa11y/react";

Usage

Example.tsx

import { Combobox } from "@compa11y/react";

const fruits = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "cherry", label: "Cherry" },
  { value: "grape", label: "Grape" },
];

function Example() {
  return (
    <Combobox
      options={fruits}
      placeholder="Search fruits..."
      clearable
    />
  );
}

Features

Type-ahead filtering
Keyboard navigation with arrow keys
Clearable input
Custom empty state message
ARIA combobox pattern compliant
Compound component API

Props

Combobox component props
Prop	Type	Default	Description
`options`*	`{ value: string; label: string }[]`	-	List of options
`value`	`string`	-	Controlled selected value
`onValueChange`	`(value: string) => void`	-	Called when value changes
`placeholder`	`string`	-	Input placeholder text
`clearable`	`boolean`	`false`	Shows clear button
`emptyMessage`	`string`	`'No results'`	Message when no options match

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Combobox
Key	Action
`ArrowDown`	Opens listbox / moves to next option
`ArrowUp`	Moves to previous option
`Enter`	Selects the focused option
`Escape`	Closes the listbox
`Home`	Moves to the first option
`End`	Moves to the last option