# 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.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.

## 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.