A form that validates on submit and moves focus to an error summary linking to each field.
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
Default, code
const Fields = () => (
<>
<TextField label="Full name" name="name" isRequired autoComplete="name" errorMessage="Enter your full name" />
<TextField label="Email" name="email" type="email" isRequired autoComplete="email" errorMessage="Enter an email address, like name@example.com" />
<Button type="submit">Save details</Button>
</>
);
<Form aria-label="Your details"><Fields /></Form>Error summary, code
<div className="flex flex-col gap-stack-md">
<ErrorSummary errors={[{ fieldId: 'demo-name', label: 'Full name', message: 'Enter your full name' }, { fieldId: 'demo-email', label: 'Email', message: 'Enter an email address, like name@example.com' }]} />
<TextField id="demo-name" label="Full name" isInvalid errorMessage="Enter your full name" />
<TextField id="demo-email" label="Email" type="email" isInvalid errorMessage="Enter an email address, like name@example.com" />
</div>The 11 design tokens Form reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.danger-subtle | … | --sd-color-bg-danger-subtle |
| color.border.danger | … | --sd-color-border-danger |
| color.icon.danger | … | --sd-color-icon-danger |
| color.text.danger | … | --sd-color-text-danger |
| color.text.default | … | --sd-color-text-default |
| shape.radius-control | … | --sd-shape-radius-control |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.inset.md | … | --sd-spacing-inset-md |
| spacing.stack.md | … | --sd-spacing-stack-md |
| spacing.stack.xs | … | --sd-spacing-stack-xs |
| target.min | … | --sd-target-min |
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { Form, ErrorSummary } from "@superduperui/react"Form also takes the props of the React Aria component it’s built on.
| Prop | Type | What it does |
|---|---|---|
childrenrequired | ReactNode | |
onSubmit | (data: FormData, event: FormEvent<HTMLFormElement>) => void | Called with the form data only when every field is valid. |
summaryTitle | string | Heading of the error summary. |
Screen readers announce On a failed submit "There is a problem, group" then each link "Full name: Enter your full name, link".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
Shared patterns it ships with: 3.3.5 (each error says how to fix it); 3.3.6 (review before submit; nothing is cleared); 1.3.6 (autocomplete on personal fields).
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 205 text runs: 0 below 7:1, lowest 7.81:1 |
| Target size | 24 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 54 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 4 of 4, Firefox 4 of 4, WebKit 4 of 4 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab passes the two fields and reaches the submit button |
| Enter | Submitting with errors moves focus to the error summary, which lists them |
| Tab | Tab reaches the first error link |
| Enter | Enter on the link moves focus to that field |
The Figma component is ErrorSummary. The Figma library isn’t published yet.
Figma to code: Title → title; Errors → errors ([{ fieldId, label, message }]); nested Error link → errors.