# Inline input

Edit typed values in place with the same type options as Input.

## Install

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

## InlineInput

```tsx
import { InlineInput } from '@/components/ui/inline-edit.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| label | string | Required |  |
| value | string | Required |  |
| onValueChange | (value: string) => void \| Promise<void> | Required | Emits the raw string. Convert to a number in the caller if needed. Rejected saves retain the draft. |
| disabled | boolean | false |  |
| placeholder | string | Add a value |  |
| validate | (value: string) => string \| undefined | — | Return an error to prevent saving. |
| display | ReactNode | Formatted value | Optional custom value display. |
| type | 'text' \| 'email' \| 'tel' \| 'url' \| 'password' \| 'search' \| 'number' \| 'money' \| 'percent' \| 'date' \| 'datetime-local' | text |  |
| currency | string | USD | Currency label for type="money". |
| min / max / step | number \| string / number \| string / number \| "any" | — / — / any |  |
| renderInput | (props: InputProps) => ReactNode | — |  |

Input and InlineInput share the type options. Enter or an outside click saves; Escape cancels. Disabled values cannot open an editor. Pending saves prevent duplicate requests.