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 TypeScriptBrowse · collection
React form elements
Accessible form components for React, each a capability with its own page, its own render tests and TypeScript you can read. The pure helpers they use are ordinary capabilities: some run in Python and Rust too, so a server can check what the form checked.
Components
Everything published as react.form.*: 13 capabilities, written for React in TypeScript only.
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.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.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.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.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
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.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.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.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 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 TypeScriptThe pure helpers they use
Written for no framework: what the components require, and every form.* capability. A component may require one of these; none of these may require a component.
auth.password-policy
Check a new password against a named policy (NIST SP 800-63B-4 by default): length, common passwords, name and email.
A group of 2:
passwordPolicy, checkPassword
form.character-count
The GOV.UK character count message for a text box: characters or words left or over a limit, with a threshold.
characterCount in TypeScript
form.date-parts
Check a date typed into day, month and year boxes, with GOV.UK's error messages and the boxes to mark in error.
validateDateParts in TypeScript
form.state TypeScript only
A form's state as a pure reducer: values, touched fields, validator errors and the submit, for useReducer.
A group of 3:
initialFormState, formReducer, visibleErrors