# Inline multi select

Select and save choices directly in a record property.

## Install

```sh
npx shadcn@4.21.0 add lr-run/dir-ui/inline-multi-select#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.

## InlineMultiSelect

```tsx
import { InlineMultiSelect } from '@/components/ui/inline-choice.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| label | string | Required |  |
| value | string[] | Required |  |
| onValueChange | InlineSaveHandler<string[]> | Required |  |
| disabled | boolean | false |  |
| items | Choice[] | Required |  |

```ts
type InlineSaveHandler<T> = (value: T) => void | Promise<void>
type Choice = { value: string; label: string }
```

Update the parent value only after persistence succeeds; throw or reject on failure. Pending saves prevent duplicate requests. Failed saves preserve the draft and offer retry or cancel. Selecting an option saves immediately. Cancel discards the pending selection.