# Inline multi combobox

Search and save record, member, status, or tag choices in place.

## Install

```sh
npx shadcn@4.21.0 add lr-run/dir-ui/inline-multi-combobox#v0.1.3
```

[Registry item with source and dependencies](https://github.com/lr-run/dir-ui/blob/v0.1.3/registry.json)

Requires React 19, Tailwind CSS 4 and shadcn initialized with Base UI. Registry target placeholders resolve through components.json: @ui, @components, @hooks and @lib. Imports below use the conventional @/ prefix for illustration; the CLI rewrites them to your configured aliases. Shared components are installed once through registryDependencies. The installer merges shared theme rules into the stylesheet configured in components.json. Existing files are never forcibly overwritten; review CLI conflicts before accepting changes. No Dir runtime is required.

## InlineMultiCombobox

```tsx
import { InlineMultiCombobox } from '@/components/ui/inline-inputs.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| value | string[] | Required |  |
| onValueChange | (value: string[]) => void \| Promise<void> | Required |  |
| items | Choice[] | Required |  |
| label | string | Required | Accessible input name. |
| selectedItems | Choice[] | [] | Supply selected labels that are absent from current search results. |
| disabled / invalid | boolean | false |  |
| loadOptions | LoadChoices | — | Optional remote search. Honor the AbortSignal; keep this callback stable. |
| debounceMs | number | 150 |  |
| maxVisible | number | 100 | Bound rendered options; refine the query for larger result sets. |
| renderOption / renderValue | (item: Choice) => ReactNode | — | renderValue customizes multi-value chips. |
| onCreate | (query: string) => void | — | Optional create action; caller owns the workflow. |
| placeholder | string | Search to select… |  |
| clearable | boolean | true | Single selection only. |
| id / ref / onBlur / aria-describedby | Input bindings | — | Connect controlled forms through React Hook Form Controller. |

```ts
type Choice = { value: string; label: string; description?: string; color?: string; avatar?: string; disabled?: boolean; keywords?: string[] }
type LoadChoices = (query: string, context: { signal: AbortSignal; cursor?: string }) => Promise<{ items: Choice[]; cursor?: string }>
```