Fieldbook
Sign in

Forms

Grouped Code Boxes

A one-time code field of individual boxed digits split into two groups by a thin center divider, with a blinking caret marking the box waiting for input.

Using Grouped Code Boxes

A one-time code field of individual boxed digits split into two groups by a thin center divider, with a blinking caret marking the box waiting for input.

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, groupSize, accentColor, caption

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

Branded Code Panel
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.
Code cover card
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.
Field with status icon
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.
OTP field
1535OTP fieldInputsA one-time-code field of separate boxes over one hidden input, where an accent tile glides to the box being edited and the row pulses once the code is complete.
Paired Code Split View
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.
Scrub Number Input
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.