Components

Overview

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

Form state

useFormState({ defaults, validate }) returns values, a fields record with dirty, touched, defaultValue, and error for each field, plus dirtyFields, touchedFields, isDirty, isValid, setValue, setTouched, touchAll, and reset. Spread register(name) onto text and select fields, or registerCheckbox(name) onto checkbox and switch fields.

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.