Currency Input

ProNew

A text input that formats a number as currency when idle and lets you edit the plain number on focus.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/currency-input

Prop	Type	Default	Description
`label`	`string`	-	Visible label, also used as the accessible name.
`currency`	`string`	`"USD"`	ISO 4217 currency code.
`locale`	`string`	`"en-US"`	Locale used for formatting and parsing.
`value`	`number \| null`	-	Controlled amount. `null` means empty.
`defaultValue`	`number \| null`	`null`	Initial amount when uncontrolled.
`onValueChange`	`(value: number \| null) => void`	-	Called with the parsed amount while editing.
`min`	`number`	-	Smallest allowed amount, applied on blur.
`max`	`number`	-	Largest allowed amount, applied on blur.

Also accepts all <input> props except type, value, defaultValue and onChange.

On blur the value is clamped to min / max and rounded to the currency's fraction digits.
The input uses inputMode="decimal" so mobile keyboards show a number pad.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/currency-input

Prop	Type	Default	Description
`label`	`string`	-	Visible label, also used as the accessible name.
`currency`	`string`	`"USD"`	ISO 4217 currency code.
`locale`	`string`	`"en-US"`	Locale used for formatting and parsing.
`value`	`number \| null`	-	Controlled amount. `null` means empty.
`defaultValue`	`number \| null`	`null`	Initial amount when uncontrolled.
`onValueChange`	`(value: number \| null) => void`	-	Called with the parsed amount while editing.
`min`	`number`	-	Smallest allowed amount, applied on blur.
`max`	`number`	-	Largest allowed amount, applied on blur.

Also accepts all <input> props except type, value, defaultValue and onChange.

On blur the value is clamped to min / max and rounded to the currency's fraction digits.
The input uses inputMode="decimal" so mobile keyboards show a number pad.