Amount input
An amount field where the digits you type rise into place and the separators slide to make room. Refused input gets a small shake, and going over your balance turns the field red while the line under it morphs to say by how much.
Things to try
- Type an amount. Each digit rises into place, and the comma slides along as the number grows.
- Ask for too much precision. A third decimal or an eighth digit is refused with a small shake rather than ignored.
- Go over your balance. The field turns red once, and "Balance £2,410.50" morphs into how far over you are.
- Press Max. It fills in your whole balance.
Install
npx shadcn@latest add https://your-docs-site/r/amount-input.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @remold-ui/react motionUsage
const [amount, setAmount] = useState("");
<AmountInput value={amount} onValueChange={setAmount} balance={2410.5} symbol="£" currency="GBP" />value is the amount as typed, digits and at most one point. Set symbol, currency (the code shown at the end of the field), decimals and maxDigits for other currencies; decimals={0} refuses the point altogether.
How it works
- A real input underneath. An invisible Base UI
Inputcovers the number, so typing, pasting, the mobile number pad and screen readers behave as they do on a plain field. The digits you see are drawn from its value. - Digits stay put. Whole digits are keyed from the left and separators by their place from the right, so typing adds one digit at the end and only the comma moves.
- The helper morphs. It's
Remold.Text, so "Balance" becomes the shortfall by keeping the letters the two lines share.
Wallet
A leather card holder with three cards in it: tap it and the cards slide up and fan out, choose one and it rises to the top while its latest transactions fill in underneath, as Apple Wallet does.
Phone input
A phone number field that formats as you type: each digit rises into place, the country's spaces and brackets appear as the number reaches them, and changing country regroups the same digits with the separators sliding to their new places.