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.

Tiptap Simple Editor template

Combobox: Search and select fruits

Install

You can add the primitive via Tiptap CLI

npx @tiptap/cli@latest add combobox

Usage

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);
  }
}