Form

Live machine

The real formMachine through useForm — two fields with blur validation, and the machine context beside them so touched, dirty, errors, and status are visible as state rather than component magic.

{
  "values": {
    "email": "",
    "team": ""
  },
  "touched": [],
  "dirty": [],
  "errors": {},
  "status": "idle",
  "submitCount": 0
}

State model

formMachine holds nested values, touched paths, dirty paths, errors, array item keys, submission count, and lifecycle status. Field paths use dot notation such as addresses.0.city.

const form = useForm({ defaultValues: { email: "" } })
const email = form.useField("email")

Validation

Synchronously supplied validators run in the machine. Asynchronous validation is requested as a command and consumed outside the machine; a newer request aborts an older request for the same field.

Adapters

Vanilla, React, Vue, Solid, Svelte, and Angular adapters all subscribe to the same service. Controlled values report a change request and remain authoritative until the host adopts the value.