Keypad

An in-app number pad for PINs and amounts: digits 1 to 0 and a delete key, each a button named by its digit and 44px or larger.

Pro, mobile
Version 2.0.0-rc.1
APG pattern: Button (each key), in a named group

Examples

Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.

Default

Enter your 4-digit PIN

Flat

Enter your 4-digit PIN

Disabled

Show the code

Disabled, code

<Keypad isDisabled />

Tokens

The 11 design tokens Keypad reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 11 tokens

Tokens Keypad reads
Token	Value now	CSS variable
color.bg.muted	…	`--sd-color-bg-muted`
color.bg.subtle	…	`--sd-color-bg-subtle`
color.text.default	…	`--sd-color-text-default`
color.text.disabled	…	`--sd-color-text-disabled`
color.text.secondary	…	`--sd-color-text-secondary`
motion.duration.fast	…	`--sd-motion-duration-fast`
motion.easing.standard	…	`--sd-motion-easing-standard`
radius.full	…	`--sd-radius-full`
radius.md	…	`--sd-radius-md`
spacing.gap.lg	…	`--sd-spacing-gap-lg`
target.min	…	`--sd-target-min`

Install

Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.

Add it from the registry (Pro licence key)

npx shadcn@latest add @superduperui/keypad

Then import it

import { Keypad } from "@/components/ui/keypad"

Props

Keypad props
Prop	Type	What it does
`onKey`	`(digit: string) => void`	Called with the digit ("0" to "9") each time a key is pressed.
`onDelete`	`() => void`	Called when the delete key is pressed.
`variant`	`'round' \| 'flat'`Default `'round'`	round (default): 72px circles, for PINs. flat: full-width 56px cells, for amounts.
`showLetters`	`boolean`Default `true`	Show the letters under each digit (ABC). Drawn, never announced. Default true.
`isDisabled`	`boolean`	Disables every key (for example while a PIN is being checked).
`deleteLabel`	`string`Default `'Delete'`	The delete key's accessible name. Default "Delete".
`aria-label`	`string`Default `'Keypad'`	Names the group. Default "Keypad".
`className`	`string`

When to use it

Use it for

PIN entry on mobile
Amount entry where the system keypad does not fit the screen

Use something else for

Ordinary number fields: the system keypad (inputmode="numeric") is better
One-time codes: use CodeInput, which SMS autofill can fill

Screen readers announce "Keypad, group. 1, button".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.4.13, 2.5.5.

Keys stay 44px or larger in Compact: density changes the gaps only.

What your product still has to do

Announce the value in the field or PIN display the keypad fills (for example "2 of 4 digits entered"), never the digits of a PIN
Accept typed digits from a hardware keyboard in that field too

This release’s test results

Test results for Keypad in this release
axe-core (WCAG A, AA, AAA and best practice)	80 runs across every story, theme, density and width: 0 violations
Rendered text contrast	700 text runs: 0 below 7:1, lowest 9.8:1
Target size	154 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)	198 focus stops in 3 browser engines: all pass
Keyboard script	Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

Keypad keyboard steps
Key	What happens
`Tab`	Tab reaches the 1 key
`Tab`	Tab moves to the next key, in reading order
`Enter`	Enter presses the key; focus stays on it
`Space`	Space presses it too

In Figma

The Figma component is Keypad, with Style (Round, Flat). The Figma library isn’t published yet.

Figma to code: Style → variant (Round = "round", Flat = "flat"); nested Delete → onDelete.