Form

Forms · src/components/Form/Form.tsx

The frame around a set of fields: title, an error summary, the fields, consent, one submit.

The summary takes focus when errors appear. A summary that only renders is a summary a screen reader never reaches, and that is the most common way a form fails WCAG in practice - not a missing label, but an error nobody is told about.

noValidate is set so the browser's own bubbles do not pre-empt this summary with a message in a different voice and a different language.

The honeypot is the only spam defence that costs a real person nothing: no puzzle, no third-party script, no tracking.

Import

import { Form } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
title	React.ReactNode
description	React.ReactNode
state	'idle' | 'pending' | 'done'	pending disables the submit and shows it working; done replaces the form with the receipt.
errors	FormError[]	Everything wrong, in one place, above the fields.
errorsTitle	React.ReactNode
submitLabel	React.ReactNode
pendingLabel	React.ReactNode
note	React.ReactNode	A line beside the submit: what happens next, how long it takes.
consent	React.ReactNode	Consent text, above the submit.
doneTitle	React.ReactNode
doneText	React.ReactNode
trapName	string	Name of the honeypot field. Change it if a form is being targeted specifically.
onSubmit	(event: React.FormEvent<HTMLFormElement>) => void
className	string
children	React.ReactNode

Exported types

FormError