Numpad
On-screen 3×4 numeric keypad for amount entry on touch surfaces. Twelve keys in a fixed grid — digits 0–9, decimal point, and backspace — every key labelled for screen readers. Used as the bottom panel of trade amount rows on mobile.
Install
import { Numpad, type NumpadKey } from '$lib/components/ui/numpad'; Usage
Numpad is a controlled input — it emits a NumpadKey on every
press; you own the value state and the formatting rules (max length, single decimal, leading zero,
etc).
<script lang="ts">
import { Numpad, type NumpadKey } from '$lib/components/ui/numpad';
let amount = $state('');
function applyKey(key: NumpadKey) {
if (key === 'backspace') {
amount = amount.slice(0, -1);
return;
}
if (key === '.' && amount.includes('.')) return;
amount = (amount === '' && key === '.' ? '0' : amount) + key;
}
</script>
<output class="font-mono text-3xl tabular-nums">{amount || '0'}</output>
<Numpad onkey={applyKey} />Keys
The grid follows the phone-keypad convention — 1 top-left, 9 top-right of the digit block, . bottom-left, 0 bottom-center, backspace bottom-right. The backspace
key renders the Remix delete-back-2-line glyph; digit and
dot keys render as tabular-nums text.
<Numpad onkey={(key) => console.log('pressed', key)} />API reference
bloom-nx custom primitive. The Button row underneath uses size='lg' with a ghost variant and bg-muted/40 tint so the keys read as a soft pad rather than six discrete buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
(key: NumpadKey) => void | — | Fires every time a key is pressed. NumpadKey is a union: digits 0–9, "." (decimal), and "backspace". | |
string | — | Merged onto the root grid via tailwind-merge. The default sets grid-cols-3 with gap-2 and respects the safe-area inset for iOS bottom sheets. |