Amount Keypad
A pay-style keypad: digits push into a big formatted amount, backspace pops them, the display shakes at the cap.
amount-keypad.tsxamount-keypad.css
Checking access…
Overview
Each digit drops into the amount from below and the thousands separators reflow live. Backspace removes the last digit, and long-pressing it clears everything.
Typing past the max shakes the amount. Physical number keys and Backspace work too.
When to use
- Send money, tip, top-up and split-bill screens on mobile.
When not to use
- Desktop forms: a normal input with formatting is faster.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/amount-keypad.json$
npx shadcn@latest add https://sundaeui.dev/r/amount-keypad.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/amount-keypad.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/amount-keypad.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy amount-keypad.tsx and amount-keypad.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { AmountKeypad } from '@/components/sundae/amount-keypad'
<AmountKeypad />Props
| Prop | Type | Default |
|---|---|---|
value / defaultValueAmount as a digit string in cents. | string | — |
maxMax amount in cents. | number | 1000000 |
currencyCurrency symbol. | string | '$' |
onValueChangeCalled on change. | (cents: number) => void | — |
onSubmitCalled by the action button. | (cents: number) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The amount is an output with aria-live; each key is a labelled button.
- Digits, Backspace and Enter on a physical keyboard work while the keypad has focus.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-akp; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Amount Keypad free?
- Amount Keypad is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Amount Keypad?
- Run npx shadcn@latest add https://sundaeui.dev/r/amount-keypad.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Amount Keypad support keyboard and screen readers?
- The amount is an output with aria-live; each key is a labelled button. Digits, Backspace and Enter on a physical keyboard work while the keypad has focus.
- Does Amount Keypad respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All forms →PIN Lock
Forms · RefinedExpense Entry
Forms · RefinedOTP Field
Forms · Refined- Pro
Drop Zone
Forms · Refined - Pro
Onboarding Flow
Forms · Refined - Pro
Wheel Picker
Forms · Refined