Combobox — dir/ui
Search a list of options and select a single value.
# Combobox
Search a list of options and select a single value.
## Install
```sh
npx shadcn@4.21.0 add lr-run/dir-ui/combobox#v0.1.2
```
[Registry item with source and dependencies](https://github.com/lr-run/dir-ui/blob/v0.1.2/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. Theme CSS is imported by the UI modules. Existing files are never forcibly overwritten; review CLI conflicts before accepting changes. No Dir runtime is required.
## SingleCombobox
```tsx
import { SingleCombobox } from '@/components/ui/multi-select.tsx'
```
| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| value | string \| null | Required | |
| onValueChange | (value: string \| null) => 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 }>
```