Functional Weave
Code in Python
Menu
Sign in Create account

Code shown in

Suites · forms-ui

Accessible React forms

GOV.UK-pattern form components for React (text, select, radios, checkboxes, dates, passwords, error summary) and the pure form state and checks behind them.

30 capabilities (9 core, 21 optional) and 8 gaps, in build order. Put each line in the file that calls it, then fune build.

The components are React 19 and TypeScript only; the helpers (form.*) and the validation they pair with are in every language.

1. Form state

Values, touched fields, errors and submit as a pure reducer, shared by browser and API.

form.state core
initialFormState, formReducer and visibleErrors, for useReducer.
A form's state as a pure reducer: values, touched fields, validator errors and the submit, for useReducer.
Not available in Python: typescript only
1.0.1
3 functions

2. Fields

Labelled, hinted inputs with their errors wired up for screen readers (React, TypeScript only).

react.form.form-field core
Wires a label, hint and error message to one control by id.
Wire a label, hint and error message to one form control by id, the accessible way (GOV.UK form group pattern).
Not available in Python: typescript only
1.0.1
2 functions
react.form.text-field core
Single-line text input with hint, error, autocomplete, prefix and suffix.
A labelled single-line text input with hint, error message, autocomplete, prefix and suffix (GOV.UK text input).
Not available in Python: typescript only
1.0.1
react.form.button core
Primary, secondary or warning button that stays focusable while loading.
A form button in primary, secondary or warning style that stays focusable while loading (GOV.UK button).
Not available in Python: typescript only
1.0.1
react.form.textarea optional
Multi-line box with an optional live character or word count.
A labelled multi-line text box with hint, error and an optional live character or word count (GOV.UK).
Not available in Python: typescript only
1.0.1
form.character-count optional
The "You have 20 characters remaining" message, in any language.
The GOV.UK character count message for a text box: characters or words left or over a limit, with a threshold.
from fune.form.character_count import character_count  # form.character-count@^1
1.0.1
react.form.select optional
Drop-down list with hint, error and an optional empty first option.
A labelled drop-down list with a hint, error message and an optional empty first option (GOV.UK select).
Not available in Python: typescript only
1.0.1
react.form.password-field optional
Password input with Show/Hide and a live policy checklist.
A password input with a Show/Hide button and an optional live checklist of a password policy (GOV.UK password input).
Not available in Python: typescript only
1.0.1
2 functions

3. Choices

Questions answered by picking.

react.form.radio-group optional
Choose one of several radios, with hints, an "or" divider and inline yes/no.
Choose exactly one of several radios, with item hints, an "or" divider and inline yes/no (GOV.UK radios).
Not available in Python: typescript only
1.0.1
react.form.checkbox-group optional
Tick any of several checkboxes, with an exclusive "None".
A question answered by ticking any of several checkboxes, with item hints and an exclusive "None" (GOV.UK checkboxes).
Not available in Python: typescript only
1.0.1
2 functions
react.form.checkbox optional
One checkbox such as "I agree to the terms".
One checkbox with its label beside it, such as "I agree to the terms" (GOV.UK single checkbox).
Not available in Python: typescript only
1.0.1
react.form.fieldset optional
Groups related inputs under a legend with a shared hint and error.
Group related inputs under a legend, with a hint and error message described to the whole group (GOV.UK fieldset).
Not available in Python: typescript only
1.0.1

4. Dates

Dates typed as day, month and year.

react.form.date-input optional
Day, month and year boxes under one legend, marking the boxes in error.
Day, month and year boxes under one legend, with hint, error message and the boxes in error marked (GOV.UK date input).
Not available in Python: typescript only
1.0.1
form.date-parts optional
Checks those three boxes with GOV.UK's error messages, in any language.
Check a date typed into day, month and year boxes, with GOV.UK's error messages and the boxes to mark in error.
from fune.form.date_parts import validate_date_parts  # form.date-parts@^1
1.0.1

5. Errors

Tell people what to fix.

react.form.error-summary core
"There is a problem" box linking to each field in error, focused on arrival.
A "There is a problem" box linking to each field in error, focused on arrival, built from a validator's fields (GOV.UK).
Not available in Python: typescript only
1.0.1
2 functions

6. Styles

A default look you can theme.

react.form.styles optional
Optional stylesheet for the caps-* classes, themed by --caps-form-* properties.
An optional stylesheet for the react.form elements' caps-* classes, themed by --caps-form-* custom properties.
Not available in Python: typescript only
1.0.1

7. Contact details from validation-basics

Check and normalise a person's contact details before storing them.

validation.email core
Is an email address plausible, by a documented subset of RFC 5322.
Is this a plausible email address? A documented, pragmatic subset of RFC 5322, not the full grammar.
from fune.validation.email import is_email  # validation.email@^1
1.0.0
validation.phone-e164 core
Normalises a phone number to +44… E.164 for a default country.
Normalise a phone number to E.164 (+447700900123) using a default country's trunk and dialling prefixes.
from fune.validation.phone_e164 import validate_phone_e164  # validation.phone-e164@^2
2.0.0
validation.uk-postcode core
Validates a UK postcode and puts it in canonical form.
Validate a UK postcode and normalise it to canonical upper case with one space before the inward code.
from fune.validation.uk_postcode import validate_uk_postcode  # validation.uk-postcode@^2
2.0.0
text.normalise-name optional
Tidies a typed name: spacing and title case with Mc, O' and hyphen rules.
Tidy a personal name: trim, collapse whitespace and title-case, with Mc, Mac, O', hyphen and van/de rules.
from fune.text.normalise_name import normalise_name  # text.normalise-name@^1
1.0.0
auth.normalise-email optional
Lower-cases an email's domain for storage and lookup.
Trim an email address and lower-case its domain for storage and lookup, or null if it is not a plausible address.
from fune.auth.normalise_email import normalise_email  # auth.normalise-email@^1
1.0.0

8. Bank details from validation-basics

Check payee and customer bank details before money moves.

validation.iban core
Checks an IBAN's mod-97 checksum and its country's length.
Check an IBAN against the ISO 13616 mod-97-10 checksum and the registered length for its country.
from fune.validation.iban import is_iban  # validation.iban@^1
1.0.0
validation.bic optional
Checks a SWIFT/BIC code's format and splits it.
Check the format of a SWIFT/BIC code (8 or 11 characters) and split it into its parts.
from fune.validation.bic import validate_bic  # validation.bic@^1
1.0.0
validation.uk-sort-code-account optional
Checks a UK sort code and account number by the Vocalink modulus rules, against a table you supply.
Check a UK sort code and account number with the Vocalink/Pay.UK modulus rules, against a table you supply.
from fune.validation.uk_sort_code_account import validate_uk_sort_code_account  # validation.uk-sort-code-account@^3
3.0.0
validation.uk-modulus-table optional
Parses Vocalink's VALACDOS and SCSUBTAB files into that table.
Parse Vocalink's VALACDOS.txt and SCSUBTAB.txt into the table UK sort code modulus checking needs.
from fune.validation.uk_modulus_table import parse_uk_modulus_table  # validation.uk-modulus-table@^1
1.0.0

9. Identifiers and check digits from validation-basics

Catch mistyped reference numbers by their check digits.

validation.luhn optional
Luhn mod-10 check, for card numbers and many reference numbers.
Check a digit string against the Luhn mod-10 checksum used by payment cards and many identifiers.
from fune.validation.luhn import is_luhn  # validation.luhn@^1
1.0.0
validation.uk-company-number optional
Checks a Companies House number's format and prefix.
Check a Companies House company number's format and prefix (SC, NI, OC, LP...) and zero-pad it to eight characters.
from fune.validation.uk_company_number import validate_uk_company_number  # validation.uk-company-number@^2
2.0.1
validation.lei optional
Checks a Legal Entity Identifier's check digits.
Check a 20-character Legal Entity Identifier against its ISO 17442 / ISO 7064 MOD 97-10 check digits.
from fune.validation.lei import validate_lei  # validation.lei@^1
1.0.0
validation.gtin optional
Checks an EAN/UPC/GTIN barcode number.
Check an EAN-8, UPC-A, EAN-13 or GTIN-14 barcode number against the GS1 mod-10 check digit.
from fune.validation.gtin import validate_gtin  # validation.gtin@^1
1.1.0

10. Displaying sensitive values from validation-basics

Show stored identifiers without exposing them.

text.mask optional
Masks all but the last digits of a card, account or phone number.
Mask all but the last n characters of a card, account or phone number, optionally keeping separators.
from fune.text.mask import mask  # text.mask@^1
1.0.0

Gaps

What this kind of app usually needs that Functional Weave does not have yet: write these yourself, or use a service.

  • other-frameworks Vue, Svelte, Angular or React Native components: only React is covered.
  • multi-step-flows Multi-page journeys: routing between steps, check-your-answers pages and saving progress.
  • file-upload File upload fields with progress, type and size checks.
  • autocomplete Autocomplete or combobox inputs (address finder, country picker).
  • submission Posting the form, CSRF protection and showing server errors back in the fields.
  • address-lookup Turning a postcode into a list of addresses (Royal Mail PAF or a lookup API) is network work and not in caps.
  • email-deliverability Whether a mailbox exists (MX lookups, a confirmation email): validation.email checks the syntax only.
  • vocalink-data The Vocalink modulus tables themselves: download them from Pay.UK under its terms; caps parses them but does not ship them.