Forms

Verification Code Card

A 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.

Enter verification code

We sent a 6-digit code to (415) 555-0142.

Verification code

Resend code in 30s

Using Verification Code Card

A 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.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: length, accentColor, resendSeconds, autoSubmit, title

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2010Paired Code Split ViewFormsA split screen verification step whose code boxes are grouped in pairs with dashes between, submitting itself the moment the last box fills.

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

1925Branded Code PanelFormsA centred verification panel under a small brand lockup, where a rejected code shakes the row once, clears it and hands focus back to the first box.

1938Code cover cardFormsA wide verification card with the code form on one side and a cover panel on the other that fills a progress bar as digits are entered.

1957Field with status iconFormsA labeled input whose trailing edge shows a small check or warning icon that fades in the moment the field's validity changes, without shifting the layout.

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.