react.form.button React ^19 · TypeScript only
A form button in primary, secondary or warning style that stays focusable while loading (GOV.UK button).
Button in TypeScriptReact capabilities
Ordered by level: primitives at the bottom of the graph, workflows at the top. Each one carries its own tests, at least 8 per function.
Suites — the capabilities a kind of app is built from: accounting, payroll, an online shop, a clinic…
Collection: React form elements — accessible form components for React, and the pure helpers they use.
Level 1 generic concept
react.form.fieldset React ^19 · TypeScript only
Group related inputs under a legend, with a hint and error message described to the whole group (GOV.UK fieldset).
Fieldset in TypeScript
react.form.form-field React ^19 · TypeScript only
Wire a label, hint and error message to one form control by id, the accessible way (GOV.UK form group pattern).
A group of 2:
fieldIds, FormField
react.form.styles React ^19 · TypeScript only
An optional stylesheet for the react.form elements' caps-* classes, themed by --caps-form-* custom properties.
formStyles in TypeScript
react.form.date-input React ^19 · TypeScript only
Day, month and year boxes under one legend, with hint, error message and the boxes in error marked (GOV.UK date input).
DateInput in TypeScript
react.form.error-summary React ^19 · TypeScript only
A "There is a problem" box linking to each field in error, focused on arrival, built from a validator's fields (GOV.UK).
A group of 2:
errorSummaryItems, ErrorSummary
react.form.select React ^19 · TypeScript only
A labelled drop-down list with a hint, error message and an optional empty first option (GOV.UK select).
Select in TypeScript
react.form.checkbox-group React ^19 · TypeScript only
A question answered by ticking any of several checkboxes, with item hints and an exclusive "None" (GOV.UK checkboxes).
A group of 2:
toggleValue, CheckboxGroup
react.form.radio-group React ^19 · TypeScript only
Choose exactly one of several radios, with item hints, an "or" divider and inline yes/no (GOV.UK radios).
RadioGroup in TypeScript
react.form.textarea React ^19 · TypeScript only
A labelled multi-line text box with hint, error and an optional live character or word count (GOV.UK).
Textarea in TypeScript
react.form.checkbox React ^19 · TypeScript only
One checkbox with its label beside it, such as "I agree to the terms" (GOV.UK single checkbox).
Checkbox in TypeScript
react.form.text-field React ^19 · TypeScript only
A labelled single-line text input with hint, error message, autocomplete, prefix and suffix (GOV.UK text input).
TextField in TypeScriptLevel 2 domain function
react.form.password-field React ^19 · TypeScript only
A password input with a Show/Hide button and an optional live checklist of a password policy (GOV.UK password input).
A group of 2:
passwordChecklist, PasswordField