Input — dir/ui

A single input for text, numeric, money, percentage, date, and time values.

# Input

A single input for text, numeric, money, percentage, date, and time values.

## Install

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

## Input, type InputProps, type InputType

```tsx
import { Input, type InputProps, type InputType } from '@/components/ui/input.tsx'
```

| Prop | Type | Default / required | Notes |
| --- | --- | --- | --- |
| value / defaultValue | string \| number \| readonly string[] | — |  |
| onChange | ChangeEventHandler<HTMLInputElement> | — |  |
| disabled / invalid | boolean | false |  |
| id / name / placeholder | string | — |  |
| ref | Ref<HTMLInputElement> | — |  |
| 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 | — | Native constraints for numeric and date inputs. |

Money and percent use the same numeric input with an adornment. Percent values are percentage points (60 = 60%). Dates use YYYY-MM-DD; local timestamps use YYYY-MM-DDTHH:mm. The disabled prop is the shared non-editable state. Other native input attributes are forwarded.