Components

Form

A form that checks its fields on submit, lists problems in a linked summary and moves focus to it.

Storybook: Storybook
Source: Source

Role and semantics

Form is a native form element; name it with aria-label or aria-labelledby. A summary replaces browser bubbles (noValidate). The summary has role="alert" and takes focus; each problem is a link to the field’s id, read as “Label: message”.

Keyboard

Key	Behaviour
Enter	Submits the form from a text field.
Tab	From the summary to its links, then to the fields.
Enter (on a link)	Goes to the field and focuses it.

Focus

On a stopped submit, focus moves to the summary (tabIndex="-1"). With summary={false} it moves to the first invalid field. When a link is used, the field is focused and scrolled into view.

Example	Output
Summary	“Fix 2 fields to continue, list, 2 items”
Link	“Email: Enter a valid email address., link”

Contrast

Summary text has 4.5:1 on the danger background, the border 3:1.

WCAG 2.2

Criterion	How Form meets it	What product teams must do
3.3.1 Error identification	Every problem is listed with its label.	Pass `error` to fields too.
3.3.3 Error suggestion	Messages come from the fields.	Write messages as fixes.
2.4.3 Focus order	Focus goes to the summary, then the fields.	—
4.1.3 Status messages	The summary is `role="alert"`.	—