Keypad | Lime design system

Examples

$0$400.00 available

When to use it

Use: The amount step of send, request or move money, full screen on a phone.
Use: A savings target or a split share, with decimal off for whole units.
Not for: An amount inside a form on a wide screen, where a keyboard is at hand. Switch at the sm breakpoint: the Keypad in sm:hidden and an Input with inputMode="decimal" in hidden sm:block, sharing one value. Use Input.
Not for: A few fixed amounts, such as $10, $20 and $50. Use Chip.
Not for: A PIN or a code. Use a one-time code field that hides the digits.

6 rules

Must: Keep value as the string the pad returns and parse it once on Continue. Because Number("12.") is 12, so the point and the trailing zero of 12.50 vanish mid-entry.
Must: Show the figure above the pad in an output with aria-live="polite", at text-3xl. Because the keys announce single digits, so the live output is how a screen reader hears the amount.
Must: Put one lime Continue under the pad, off at zero and over the balance. Because a Continue that stays on lets the person send nothing or more than they have.
Should: Say why Continue is off under the figure, such as More than your $400.00.
Should: Set decimal={false} for whole units; the point key leaves a blank cell.
Never: Open the phone keyboard as well; no input takes focus on this screen. Because the system keyboard slides over the pad and two inputs edit one amount.

5 checks

: The pad is a group named Amount keypad; every key is a button.
: The point is named Decimal point and the delete key Delete.
: With focus inside, the keys 0 to 9, the point and Backspace type as well.
: Keys are 56px tall, over the 44px touch target.
: The figure above is the screen's output with aria-live="polite", so each change is read.

6 edge cases

Leading zero: 0 then 5 gives 5; the point after nothing gives 0.
Third decimal: The key does nothing once there are two digits after the point.
Second point: Ignored.
Over maxDigits: Digits stop at the cap; the cents can still be typed.
Over the balance: The pad still types; the screen turns Continue off and says why.
Narrow phone: The keys share the width; the pad never scrolls.

5 props

12 tokens