Amount Input

The AmountInput component is a customizable input field designed for users to enter numerical amounts, featuring validation and formatting options.

Installation

Install the package

npm i @start-base/react-form-elements

Add the styles

To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.

app/layout.tsx

import "@start-base/react-form-elements/styles.css";

Import the component

import AmountInput from '@start-base/react-form-elements/AmountInput';

Usages

Amount Input Without Label

Amount Input With Floating Label

Label

Amount Input With Placeholder

Amount Input With Floating Label and Placeholder

Label

Amount Input With Placeholder And Disable Shrink

Label

Disabled Amount Input

Label

Amount Input With Append

Label

Amount Input With Prepend

Label

Amount Input With Error Message

Label

Error Message

Amount Input With Error

Label

API

This component is a wrapper around react-currency-input-field (opens in a new tab) component. All props from react-currency-input-field can be passed to this component.

Name	Type	Default	Description
name	`string`		Name of the input
label	`string`	`null`	Label of the input
placeholder	`string`	`null`	Placeholder of the input
disableShrink	`boolean`	`false`	Position the label outside of the input
value	`number`		Value of the input
onChange	`function`		Callback function that is fired when the value changes.
inputClassName	`string`	`null`	Classname for input element
labelClassName	`string`	`null`	Classname for label element
errorClassName	`string`	`null`	Classname for error element
disabled	`boolean`	`false`	Disable the input
error	`string` or `boolean` or `object`	`null`	Error message to display below the input. if value is a boolean input border will be change. Also you can pass schema validator error objects.
prepend	`string` or `element`	`null`	Prepend text to the input
append	`string` or `element`	`null`	Append text to the input
appendClassName	`string`	`null`	Classname for append element
prependClassName	`string`	`null`	Classname for prepend element
allowDecimals	`boolean`	`true`	Allow decimals
allowNegativeValue	`boolean`	`true`	Allow user to enter negative value
decimalsLimit	`number`	`2`	Limit length of decimals allowed
decimalScale	`number`		Specify decimal scale for padding/trimming eg. 1.5 -> 1.50 or 1.234 -> 1.23 if decimal scale 2
fixedDecimalLength	`number`		Value will always have the specified length of decimals
prefix	`string`		Include a prefix eg. £ or $
suffix	`string`		Include a suffix eg. € or %
decimalSeparator	`string`	locale default	Separator between integer part and fractional part of value
groupSeparator	`string`	locale default	Separator between thousand, million and billion
intlConfig	`object`		International locale config
disabled	`boolean`	`false`	Disabled
disableAbbreviations	`boolean`	`false`	Disable abbreviations eg. 1k -> 1,000, 2m -> 2,000,000
disableGroupSeparators	`boolean`	`false`	Disable auto adding the group separator between values, eg. 1000 -> 1,000
maxLength	`number`		Maximum characters the user can enter
step	`number`		Incremental value change on arrow down and arrow up key press
transformRawValue	`function`		Transform the raw value from the input before parsing. Needs to return `string`.

Typography Calendar