Forms

Focus Guard Form

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

Using Focus Guard Form

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

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: submitLabel, accentColor, requireAll

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

2078Validated Signup FormFormsA small form runtime that tracks values, validates on blur and submit, wires errors to their inputs, and shows a submitting then submitted state.

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.

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.

2006One Question WizardFormsA multi-step form that shows a single question at a time with a progress readout, only moving forward once the current question has a valid answer.

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.