The Combobox component combines a text input with a listbox of options, allowing users to filter and select from a list.
Installation
import { Combobox } from "@craftdotui/baseui/components/combobox";
This component is built on @base-ui/react’s Combobox primitive. Refer to the source code for the complete API and implementation details.
<Combobox
options={[
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
]}
/>
Features
- Searchable dropdown
- Keyboard navigation
- Single or multiple selection
- Custom option rendering
- Async option loading
- Filtering and sorting
Examples
Basic Combobox
<Combobox
placeholder="Select an option"
options={[
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
{ value: 'angular', label: 'Angular' },
]}
/>
With Search
<Combobox
searchable
placeholder="Search frameworks..."
options={frameworks}
/>
Accessibility
- Built on @base-ui/react for ARIA compliance
- Combobox ARIA pattern
- Keyboard accessible
- Screen reader support
- Focus management