Components

Overview

A complete Next.js/React form example driven by FormStateProvider and useFormStateContext. The provider owns values, per-field status, and validation, and the submitted object is rendered with JsonViewer.

Shared form context

Wrap a form subtree in FormStateProvider, passing defaults and an optional validate function. Any nested field, action bar, validation summary, step, or debug panel can then call useFormStateContext<FormValues>() without prop drilling. The hook throws a clear error when it is used outside the provider.

The context returns values, a fields record with dirty, touched, defaultValue, and error for each field, plus dirtyFields, touchedFields, isDirty, isTouched, isValid, setValue, setTouched, touchAll, and reset. Spread register(name) onto text and select fields, or registerCheckbox(name) onto checkbox and switch fields. The lower-level useFormState hook remains available when context is unnecessary.

Behaviour

Errors surface only after a field is touched, submit always stays enabled, and submitting an invalid form marks every field touched instead of sending. The payload includes an ISO timestamp and a meta block describing dirty and touched fields. In a production Next.js app, move validation and persistence into a server action, then return serialisable state for the client-side result view.

Accessibility

Every field has a visible label, required fields use native constraints, validation messages are wired through each field's error prop, and submission and reset are handled in React so the controlled values never desync from the rendered fields.

Props