## Overview [#overview]
The **Combobox** component provides an accessible autocomplete input that combines a text input with a filterable dropdown list. It supports both single and multi-select modes, grouped options, custom rendering, and creatable items. Built on Base UI primitives, it offers full keyboard navigation and accessibility features.
## Usage [#usage]
```tsx
import {
Combobox,
ComboboxChips,
ComboboxClear,
ComboboxContent,
ComboboxIcon,
ComboboxInput,
ComboboxItem,
ComboboxItemIndicator,
ComboboxList,
ComboboxValue,
ComboboxWrapper,
} from "@tilt-legal/cubitt-components/primitives";
```
```tsx
// Basic single select
No results found.
{(item) => (
{item.label}
)}
```
Using Cubitt's URL-state hooks, you can sync the combobox selection with the URL by providing a `paramName`. The component automatically detects common ID fields (`id`, `value`, `code`, `key`) from objects to generate clean URLs:
```tsx
// Single select - synced with ?category=electronics
{/* ... */}
// Multi-select - synced with ?tags=react,typescript,ui
{/* ... */}
// Advanced options:
console.log("Selected:", value)}
>
{/* ... */}
```
For objects with non-standard ID fields, provide `itemToStringValue`:
```tsx
item.customId}
paramName="selection"
>
{/* ... */}
```
## Examples [#examples]
### Multi-Select with Chips [#multi-select-with-chips]
Display selected items as removable chips within the input.
```tsx
import {
Combobox,
ComboboxChip,
ComboboxChipRemove,
ComboboxChips,
ComboboxContent,
ComboboxEmpty,
ComboboxInput,
ComboboxItem,
ComboboxItemIndicator,
ComboboxList,
ComboboxValue,
} from "@tilt-legal/cubitt-components/primitives";
const langs = [
{ id: "js", value: "JavaScript" },
{ id: "ts", value: "TypeScript" },
{ id: "py", value: "Python" },
];
{(value) => (
<>
{value.map((language) => (
{language.value}
))}
)}
No languages found.
{(language) => (
{language.value}
)}
;
```
Need users to create new tags on the fly? Use the [TagInput](/primitives/tag-input) component which provides a simpler API with built-in support for creating tags via Enter/comma, CSV paste parsing, and backspace removal.
### Multi-Select with Separate Input [#multi-select-with-separate-input]
Use a separate input field with chips displayed below.
```tsx
{(value) => (
<>
{value.map((language) => (
{language.value}
))}
)}
No languages found.
{(language) => (
{language.value}
)}
```
### Button Trigger with Popup Input [#button-trigger-with-popup-input]
Use a button trigger with the input inside the popup.
```tsx
import { Button } from "@tilt-legal/cubitt-components/primitives";