NumericKeypad

NumericKeypad

const [pin, setPin] = useState('');

<NumericKeypad
  onDigit={(d) => setPin((p) => (p + d).slice(0, 6))}
  onBackspace={() => setPin((p) => p.slice(0, -1))}
/>

{/* With submit */}
<NumericKeypad
  onDigit={…}
  submitLabel="Pay"
  onSubmit={() => pay(amount)}
/>

Install: @helixui/core

import { NumericKeypad } from '@helixui/core'

status: stable · since: 0.5.0

Tags: mobile, keypad, pin, numeric

Anatomy

1   2   3
4   5   6
7   8   9
        0   ⌫

Layout

• display — grid
• width — fill
• height — content
• intrinsicSize — 3×4 grid; tile size scales with width
• stackable — false
• fullBleed — false

Visual

A 3×4 grid of large round buttons (44px+) with optional letter sub-labels (ABC, DEF, …) for phone-style entry. Backspace key in the bottom-right.

Props

Name	Type	Default	Description
onDigit	(digit: string) => void	—	Called for each digit press 0–9.
onBackspace	() => void	—	Called when backspace is tapped (when no submitLabel).
onSubmit	() => void	—	Called when the submit key is tapped (when submitLabel is set).
bottomLeft	ReactNode	—	Custom node for the bottom-left cell (default empty).
bottomRight	ReactNode	—	Custom node for the bottom-right cell (default backspace).
submitLabel	ReactNode	—	When set, renders a brand-colored submit button at bottom-right and triggers onSubmit instead of backspace.
size	'md' | 'lg'	md	Key height — 56 / 72 px.

Tokens used

color.bg.action.neutral.default, color.bg.action.neutral.hover, color.bg.action.neutral.active, color.bg.action.brand.default, color.bg.action.brand.hover, color.text.primary, color.text.on.brand, color.text.muted, color.border.focus, radius.full, space.2, space.3, font.family.sans, font.size.2xl, font.weight.medium, font.weight.semibold

Accessibility

Notes

• Each key is a <button> with an aria-label (“Digit 1”). The wrapper is role="group".
• For currency inputs, set bottomLeft to a decimal . button.

Composes with

Component	Relation	Note
PinInput	sibling	Often paired with PinInput for mobile PIN entry.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

mobile PIN entry

“on-screen numeric keypad”

<NumericKeypad onPress={handleKey} />

Related

• PinInput