Currency Input

Docs

Currency Input

Input field for currency values with formatting.

Amount

Customized

Clearable

Installation

import { CurrencyInput } from "@/components/ui/currency-input";

<CurrencyInput>{/* Example usage */}</CurrencyInput>

CurrencyInput extends the functionality of react-currency-input-field with additional styling and features.

Prop	Type	Default	Description
`className`	`string`	`-`	The class name to apply to the component.
`clearClassName`	`string`	`-`	Class name for the clear button.
`hasError`	`boolean`	`false`	Shows error state with red border.
`clearable`	`boolean`	`false`	Enables clearing the input value.
`onClear`	`() => void`	`-`	Callback when clear button is clicked.
`leftAddon`	`ReactNode`	`-`	Content to display before the input.
`rightAddon`	`ReactNode`	`-`	Content to display after the input.
`leftControl`	`ReactNode`	`-`	Control to display at the left of the input.
`rightControl`	`ReactNode`	`-`	Control to display at the right of the input.
`prefix`	`string`	`-`	The prefix to display before the value.
`suffix`	`string`	`-`	The suffix to display after the value.
`decimalsLimit`	`number`	`-`	Maximum number of decimal places allowed.
`decimalSeparator`	`string`	`.`	Character used as decimal separator.
`groupSeparator`	`string`	`,`	Character used to separate thousands.
`value`	`string \| undefined`	`-`	The controlled value of the input.
`defaultValue`	`string \| undefined`	`-`	The default uncontrolled value of the input.
`onValueChange`	`(value: string \| undefined, name?: string) => void`	`-`	Callback when value changes.

Contribute