Component

Amount input

A large, centered numeric field that shrinks its own font as the value grows, with a converted-currency line beneath it and a MAX shortcut tied to an available balance.

Standalone

USD

≈ 230.00 EURAvailable: 4,280 USD

amount input.tsx

<NativeAmountInput
  value={value}
  onValueChange={setValue}
  currency="USD"
  converted="≈ 230.00 EUR"
  max={4280}
  onMax={() => setValue("4280")}
/>

Example

Centered on a form screen: a card frames the input, and the MAX shortcut is wired to an available limit.

USD

≈ 230.00 EURAvailable: 4,280 USD

amount-input-example.tsx

<div className="rounded-2xl border p-6">
  <NativeAmountInput
    value={value}
    onValueChange={setValue}
    currency="USD"
    converted="≈ 230.00 EUR"
    max={4280}
    onMax={() => setValue("4280")}
  />
</div>

Capabilities

Prop	Type	Description
valuerequired	string	-
onValueChangerequired	(value: string) => void	-
currency	string	-
converted	string	Shown below the amount - e.g. "≈ $1,234.56 USD"
max	number	Max available balance
onMax	() => void	-
error	string	-
disabled	boolean	-
className	string	-