Forms

Tall Code Keypad

Tall Code Keypad: A borderless verification form built on unusually tall code boxes, with digits that land with a short bounce and a held backspace that clears everything.

Enter verification code

We sent a 6-digit code to your device. Enter it below to continue.

Didn’t get a code?

By continuing you agree to the terms of service and privacy policy.

Using Tall Code Keypad

Tall Code Keypad uses the card preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

Control	Type	Default	Preview limits
`accentColor`	`color`	`#FF4D8D`	No additional limit in the metadata.
`length`	`number`	`6`	From 4 to 8; step 2
`cellHeight`	`number`	`64`	From 48 to 80; step 4
`holdToClear`	`boolean`	`true`	No additional limit in the metadata.
`heading`	`text`	`Enter verification code`	Up to 48 characters

Which frameworks are available for Tall Code Keypad?

Tall Code Keypad is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Tall Code Keypad depend on?

The React metadata lists these npm dependencies beyond React: motion, clsx, tailwind-merge.

What accessibility details are visible in Tall Code Keypad?

The React source for Tall Code Keypad includes: native elements (a, button, input); attributes and handlers (aria-hidden, aria-label, onKeyDown, onKeyUp); explicit roles (group). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Tall Code Keypad handle reduced motion?

Tall Code Keypad reads the motion preference in its React source through useReducedMotion(). Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Verification Code Card component, a Fieldbook UI component in Forms.

2080Verification Code CardFormsA boxed verification step with a labelled code field, a Verify button that unlocks only when the code is complete, and a resend link on a countdown.

Still of the Focus Guard Form component, a Fieldbook UI component in Forms.

1964Focus Guard FormFormsA form that, on a failed submit, cancels the submission, moves keyboard focus straight to the first invalid field, and announces the problem for screen reader users.

Still of the Notification preferences component, a Fieldbook UI component in Forms.

2876Notification preferencesFormsChoose delivery channels for workspace events and save a readable preference summary.

Still of the Release notification form component, a Fieldbook UI component in Forms.

2887Release notification formFormsA release notification form validates an email and records a local preference for release summaries or major updates.

Still of the Scribble strike checklist component, a Fieldbook UI component in Forms.

2028Scribble strike checklistFormsA task list where checking a row draws a wobbling hand-drawn line across the label, and unchecking retracts it.

Still of the Scrub Number Input component, a Fieldbook UI component in Forms.

2030Scrub Number InputFormsA number field with increment and decrement buttons plus a draggable label that scrubs the value up or down as you drag it sideways.