TokenAmountInputProps

Beta

Props to the TokenAmountInput component.

This is a closed surface, not an extension of react-number-format’s NumericFormatProps: NumericFormat is a private implementation detail of this component. Passing react-number-format props directly (e.g. decimalSeparator, thousandSeparator, format, isAllowed) would both make every upstream react-number-format release a semver-relevant change to this type, and defeat the reject-not-strip locale invariant below by letting a caller reopen separator ambiguity underneath it. A prop is only added here as a deliberate decision.

Properties

allowNegative?

optional allowNegative?: boolean;

Beta

Whether negative amounts are allowed. Defaults to false, since a token amount can never be negative.

amount?

optional amount?: bigint;

Beta

Amount to seed the input with. The amount will be tracked locally within the component, but also can be controlled by the parent via the onChangeAmount handler.

aria-describedby?

optional aria-describedby?: string;

Beta

External id(s) of describing element(s). Merged with the component’s own rendered error text’s id, if any, so both are announced.

aria-invalid?

optional aria-invalid?: boolean;

Beta

External invalid state (e.g. from a form library’s field state). ORed with the component’s own validity so neither source can clobber the other.

aria-label?

optional aria-label?: string;

Beta

Accessible label, for standalone (unlabelled-by-sibling) usage.

className?

optional className?: string;

Beta

Class name applied to the rendered input element.

customInput?

optional customInput?: ComponentType<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>;

Beta

The input primitive NumericFormat renders through. Defaults to the headless BaseInput, which carries no border, background, or focus ring of its own — see the component doc comment below.

disabled?

optional disabled?: boolean;

Beta

Whether the input is disabled.

id?

optional id?: string;

Beta

Standard HTML id attribute.

locale?

optional locale?: string;

Beta

The Intl.UnicodeBCP47LocaleIdentifier locale used to resolve the decimal and thousands (grouping) separators, mirroring how Numeric resolves its display locale. Defaults to en-US.

This is never derived from the browser/OS locale — a money input’s parsing must not silently vary with the user’s environment. Unsupported keystrokes and extra decimal separators are ignored without changing the accepted amount or validation state. Grouping is inserted automatically; typing a grouping separator is a no-op.

Pasted and dropped amounts are validated as complete strings. Foreign separators or malformed three-digit grouping set aria-invalid, render an error, and report no value via onChangeAmount until corrected. Correct grouping such as 1,234 in en-US remains valid.

maxAmount?

optional maxAmount?: bigint;

Beta

The maximum amount that can be entered in the input.

minAmount?

optional minAmount?: bigint;

Beta

The minimum amount that can be entered in the input.

name?

optional name?: string;

Beta

Standard HTML name attribute, for uncontrolled/native form submission.

onBlur?

optional onBlur?: FocusEventHandler<HTMLInputElement>;

Beta

Native blur handler.

onChangeAmount?

optional onChangeAmount?: (amount) => void;

Beta

Custom input handler specifically to report not only the raw input decimal string, but also a converted bigint based on the value of the token decimals. This is optional if the input will be untracked and the value read via form submit.

Parameters

Parameter	Type	Description
`amount`	{ `formattedValue`: `string`; `isValid`: `boolean`; `tokenDecimals?`: `number`; `value?`: `bigint`; }	Object that contains the raw input value as a decimal string, bigint representation of the decimal value, and the token decimals used in the calculation to convert the raw value to the bigint. The `big` and `tokenDecimals` properties will not be reported if the `tokenDecimals` prop is undefined, and `value` is also withheld when pasted or dropped text contains a separator foreign to `locale` or malformed grouping (see `locale` below) — a corrupted-magnitude bigint must never reach a consumer. `isValid` is false for that raw gesture even when `react-number-format` normalizes the displayed string; consumers that store `formattedValue` must reject it when `isValid` is false.
`amount.formattedValue`	`string`	-
`amount.isValid`	`boolean`	-
`amount.tokenDecimals?`	`number`	-
`amount.value?`	`bigint`	-

Returns

void

Void

placeholder?

optional placeholder?: string;

Beta

Placeholder text shown when the input is empty. Defaults to '0.00'.

prefix?

optional prefix?: string;

Beta

A fixed prefix rendered as part of the formatted value (e.g. a currency symbol). Stripped before parsing, so it never interacts with separator resolution.

readOnly?

optional readOnly?: boolean;

Beta

Whether the amount is displayed without allowing user edits.

tokenDecimals?

optional tokenDecimals?: number;

Beta

The number of decimals to limit the amount input to. This will naturally be the related selected token’s decimals value. If this prop is not provided, for example if a related token has not yet been selected, then the user will be enter a number with an arbitrary amount of decimals, and the onChangeAmount handler will report only the formattedValue, which is the string text in the input, as converting the decimal figure to a bigint representation will not be possible.