Integrate the Combobox UI component
A searchable dropdown component that combines an input field with a filterable list of options, built on top of Ariakit for accessibility and powered by advanced interaction patterns.
Install
You can add the primitive via Tiptap CLI
npx @tiptap/cli@latest add comboboxUsage
import { ComboboxProvider, Combobox, ComboboxPopover, ComboboxList, ComboboxItem, } from '@/components/tiptap-ui-primitive/combobox' export default function MyComponent() { const [value, setValue] = React.useState('') const [selectedValue, setSelectedValue] = React.useState('') return ( <ComboboxProvider value={selectedValue} setValue={setSelectedValue}> <Combobox value={value} onChange={(e) => setValue(e.target.value)} placeholder="Search options..." /> <ComboboxPopover> <ComboboxList> <ComboboxItem value="apple">Apple</ComboboxItem> <ComboboxItem value="banana">Banana</ComboboxItem> <ComboboxItem value="cherry">Cherry</ComboboxItem> <ComboboxItem value="date">Date</ComboboxItem> </ComboboxList> </ComboboxPopover> </ComboboxProvider> ) }Props
ComboboxProvider
Built on top of Ariakit's ComboboxProvider with optimized defaults.
| Name | Type | Default | Description |
|---|---|---|---|
| includesBaseElement | boolean | false | Whether to include base element in tab sequence |
| resetValueOnHide | boolean | true | Whether to reset value when popover is hidden |
| value | string | - | Current selected value |
| setValue | (value: string) => void | - | Function to update selected value |
Combobox
The input field component for typing and filtering.
| Name | Type | Default | Description |
|---|---|---|---|
| autoSelect | boolean | true | Automatically select first option |
ComboboxItem
Individual selectable option within the combobox list.
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | - | Value to select when item is chosen |
Styling
The Combobox component uses CSS custom properties for theming:
.tiptap-combobox-list { --tt-combobox-bg-color: var(--white); --tt-combobox-border-color: var(--tt-gray-light-a-100); --tt-combobox-text-color: var(--tt-gray-light-a-600); .dark & { --tt-combobox-border-color: var(--tt-gray-dark-a-50); --tt-combobox-bg-color: var(--tt-gray-dark-50); --tt-combobox-text-color: var(--tt-gray-dark-a-600); } }