Amount Input
Numeric amount input with token-aware max button and wallet integration.
Introduction
AmountInput is a numeric-only input tailored for token amounts. It supports a Max button that fills in the user's available balance, token icon display, and smart defaults for input step based on token decimals.
Features
- Numeric-only input: Blocks non-numeric characters, exponent notation, and multiple dots
- Max button: One-click set to available balance (when an account is connected and balance loaded)
- Token-aware UX: Derives step and icon from token metadata via chaindata
- Wallet-aware states: Enable/disable behavior based on connection and balance
- Shadcn Input compatible: Accepts and forwards all shadcn
Inputprops - USD estimate (optional): Pass
tokenConversionRateto show an inline “~ $X.XX USD” hint below the input
Installation
npx polkadot-ui@latest add amount-inputUsage
Some usages of the AmountInput component depend on having a wallet connected and balance loaded. You can select the account here to illustrate this:
Amount Input
Input component for entering amounts
Amount Input - Controlled
This Amount input is controlled. Open the console to see the value changes.
Value: null
Amount Input - With Required Account
This Amount input has the requiredAccount set to true. Try disconnecting the wallet and see the input being disabled. Connect the wallet and see the input being enabled.
Amount Input - Without Max Button
This Amount input does not have a Max button
Amount Input - Not bound to an asset
This Amount input is not bound to an asset and uses own formatting and icons
Amount Input - With custom step
This Amount Input has the step set to 0.05
Amount Input Base - Manual values
Using the base component directly with manual decimals, max, and icon.
Paseo Asset HubProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
chainId | string | yes | - | Chain identifier for balances/metadata |
assetId | number | yes | - | Asset ID to bind the input to |
value | string | no | "" | Controlled value |
onChange | (value: string) => void | no | - | Controlled change handler (string) |
placeholder | string | no | "Enter amount" | Input placeholder |
withMaxButton | boolean | no | true | Show the Max button |
requiredAccount | boolean | no | false | If true, disables input when no account/connection |
disabled | boolean | no | false | Force disable the input |
className | string | no | - | Extra classes for the input |
step | number or string | no | derived (see below) | Numeric step; defaults to 10^-p where p = min(2, tokenDecimals) |
tokenConversionRate | number | no | - | USD per 1 token. When provided, shows an estimate like ~ $24.12 USD below the input |
Notes:
Behavior
- When
requiredAccountis true and there is no connected account, the input is disabled. Otherwise it stays enabled but the Max button remains disabled. - Max button is visible when
withMaxButtonis true, and becomes enabled when an account is connected and balance is loaded (> 0). - Numeric guard: prevents letters, exponent notation, and extraneous characters via keydown/beforeinput/paste sanitization.
maxattribute mirrors the available balance (formatted) when known.- When balance is 0 and an account is connected, the input disables if the base's
requiredBalanceis active via the dedot wrapper logic.
Accessibility
- Uses standard input semantics and focus rings from shadcn.
- Max button is keyboard and screen-reader accessible.