# MoneyInput

> Money typed without a wrong comma or point. By default it types like a cash machine: digits enter from the right, so nobody hunts for the decimal key, and the caret stays at the end. Free entry takes the text as typed and formats it on blur. Pasting R$ 1.234,56, €1,234.56 or 1234.5 works either way. The value is an integer in the currency's smallest unit, never a float.

Section: Forms. Docs: https://entrepta.vercel.app/docs/components/money-input

## Install

```bash
npx @entrepta/cli@latest add money-input
```

Files: `primitives/money-input.tsx`, `primitives/kbd.tsx`, `primitives/input.tsx`, `lib/format.ts`, `hooks/use-format.ts`.
npm packages: `class-variance-authority`, `@phosphor-icons/react`.
Comes with: `kbd`, `input`, `format-lib`, `use-format`.

## Usage

```tsx
import { MoneyInput } from "@/components/entrepta/money-input"
import { Field } from "@/components/entrepta/field"

const [price, setPrice] = useState<number | null>(null)

<Field id="price" label="price" error={error}>
  <MoneyInput currency="EUR" value={price} onValueChange={setPrice} size="lg" />
</Field>

// with React Hook Form
<Controller
  name="amount"
  control={control}
  render={({ field }) => (
    <MoneyInput currency="EUR" value={field.value} onValueChange={field.onChange} />
  )}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value / onValueChange` | `number \| null` | - | Integer minor units: 123456 is 1,234.56 in euros. null when empty |
| `currency` | `string` | - | ISO 4217. Falls back to the FormatProvider's |
| `locale` | `string` | - | Separators and the symbol's side. Falls back to the FormatProvider's, then en-US |
| `entry` | `"cents-first" \| "free"` | "cents-first" | Digits from the right, or free text formatted on blur |
| `allowNegative` | `boolean` | false | Most amounts take their sign from elsewhere, such as expense or income |
| `size` | `"md" \| "lg"` | "md" | lg for the main value of a form |