Forms

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.

view .md

Preview

amount

holds 123456, in cents

free entry

holds null. Paste 1,234.56 or R$ 99,90

Installation

terminal

bash

npx @entrepta/cli@latest add money-input

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

money-input.tsx

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