# Attaform

> A type-safe, schema-driven form library for Vue 3 and Nuxt with first-class Zod support. Hand a Zod schema to `useForm` and Attaform turns it into a reactive form, typed end-to-end, with live errors, automatic accessibility, and SSR out of the box.

This file is regenerated from the Attaform documentation on every build, so its links and its code stay in lockstep with the live site. For anything past this index, the docs at [attaform.dev](https://attaform.dev), the published `attaform` types, and the source at [github.com/attaform/Attaform](https://github.com/attaform/Attaform) are canonical. When in doubt, crawl from the homepage rather than giving up on the project.

Attaform's core idea is that the schema IS the form. One Zod schema declares the shape, the defaults, the validation, the per-field errors, and the input/output types. Attaform builds the reactive surface around it.

The default entry `attaform` dispatches between Zod v3 and v4 per call, so projects on either version (or a mix) share one import; `attaform/zod` is the same surface, named explicitly. The Nuxt module auto-wires the plugin, the `v-register` directive, the SSR plumbing, and the DevTools panel. Bare Vue + Vite works through the Vite plugin without Nuxt.

Forms are bound to native inputs through the `v-register` directive, which also keeps each field's aria attributes in sync with its validation state. Submission goes through `form.handleSubmit(onSubmit)`. Multistep flows compose multiple `useForm` instances under `useWizard`. Undo/redo, server-error routing, and a Nuxt DevTools panel are all opt-in.

## API at a glance

```ts
import { useForm } from 'attaform'
import { z } from 'zod'

const schema = z.object({
  email: z.email('Enter a valid email'),
  password: z.string().min(8, 'At least 8 characters'),
})

const form = useForm({ schema })

const onSubmit = form.handleSubmit(async (values) => {
  await fetch('/api/sign-in', { method: 'POST', body: JSON.stringify(values) })
})
```

```vue
<template>
  <form @submit="onSubmit">
    <label>
      Email
      <input v-register="form.register('email')" autocomplete="email" />
      <em v-if="form.fields.email.showErrors">{{ form.fields.email.firstError?.message }}</em>
    </label>
    <label>
      Password
      <input v-register="form.register('password')" type="password" autocomplete="off" />
      <em v-if="form.fields.password.showErrors">{{ form.fields.password.firstError?.message }}</em>
    </label>
    <button :disabled="form.meta.submitting" type="submit">Sign in</button>
  </form>
</template>
```

The form handle exposes reactive reads (`form.values`, `form.errors`, `form.fields`, `form.meta`), mutation helpers (`form.setValue`, `form.reset`, `form.history.undo`), and submission (`form.handleSubmit`). The `v-register` directive accepts `{ transforms, autoAria }` options for per-field configuration.

Multistep flows compose forms under `useWizard`:

```ts
import { useForm, useWizard } from 'attaform'

const account = useForm({ schema: accountSchema, key: 'account' })
const profile = useForm({ schema: profileSchema, key: 'profile' })

const wizard = useWizard({
  steps: [account, 'review', profile],
})

const onComplete = wizard.handleSubmit(async (ctx) => {
  await fetch('/onboarding', { method: 'POST', body: JSON.stringify(ctx.values) })
})
```

Steps can be `useForm` references, bare strings (affordance-only positions), `null` / `undefined` (filtered out), eager function slots, or `lazy(ctx => ...)` markers. `wizard.handleSubmit` validates every step from any position and calls `onSubmit` once with all values; it never advances. `wizard.tryNext()` is the gated Next: it validates the active step and advances only on a clean pass.

## Quick reference

The form handle returned by `useForm({ schema })`:

- `form.values` reactive view of form state. Drill: `form.values.email`. Call: `form.values('user.email')`.
- `form.errors` reactive error map by path. Same drill and call shapes.
- `form.fields.<path>` per-field state. Most-touched keys: `value`, `touched`, `interacted`, `blurredAfterInteraction`, `dirty`, `blank`, `displayState`, `showErrors`, `firstError`, `validating`, `valid`, `errors`, `key`, `focused`, `blurred`, `connected`. `displayState` (`idle` / `pending` / `error` / `success`) projects to `showPending` / `showSuccess` / `showIdle` alongside `showErrors`; every field also carries `id` + `aria.{errorId, descriptionId}` for accessibility wiring, and `key` follows an array element across reorders. The default display gate is reward-early/punish-late: it stays `idle` on a clean tab-through and mid-entry, reveals once a field is edited and then left (or on any submit), and clears live on re-focus. `interacted` (sticky on the first user edit) and `blurredAfterInteraction` (sticky on the first blur after an edit, the gate's driver) tell a real, completed edit apart from a tab-through.
- `form.list(path)` / `form.record(path)` per-element reads: one FieldState per array element (index order) or per record entry (keyed), each carrying the stable `key` for a keyed `v-for`. `form.fields(path)` stays the rolled-up container for the whole array or record.
- `form.meta` top-level flags: `valid`, `dirty`, `submitting`, `submitted`, `submissionAttempts`, `submitError`, `errorCount`, `errors`, `key`, `instanceId`. `form.meta` is itself a rolled-up FieldState, so it also carries `displayState` / `show*` aggregated over the form; `form.meta.showPending` additionally tracks the form's own validation, so it stays lit through a submit's validation pass. Gate a submit button on `form.meta.submitting` (the precise "a submit is in flight" flag); use `form.meta.showPending` for an ambient "validating" indicator.
- `form.register(path, opts?)` returns the binding for `v-register`. Options: `transforms`, `autoAria`.
- `form.handleSubmit(onSubmit, onError?)` submit wrapper. Validates, routes errors, calls `onSubmit` with the parsed values.
- `form.setValue(path, value)`, `form.reset(defaults?)`, `form.resetField(path)`, `form.clear(path?)`, `form.unset(path)` programmatic writes.
- `form.append`, `form.prepend`, `form.insert`, `form.remove`, `form.swap`, `form.move`, `form.replace` typed field-array mutations. An element's state (value, errors, dirty, touched) travels with it across reorders.
- `form.validate(path?)`, `form.validateAsync(path?)`, `form.parse(path?)` manual validation. `form.parse` is always async (no sync variant by design) and resolves the parsed Zod output.
- `form.setErrors(errors)`, `form.setErrors(path, errors)`, `form.setErrors(updater)`, `form.clearErrors(path?)` set or clear the manual error layer. A path-less error is form-level at the root `[]`; each error accepts an optional `data` payload.
- `form.history.{undo, redo, clear, canUndo, canRedo, size}` undo/redo namespace.
- `form.applyInvalidSubmitPolicy(policy?)`, `form.focusFirstError()`, `form.scrollToFirstError()` UX primitives.
- `form.touch(path?)`, `form.toRef(path)`, `form.rehydrate()` introspection and lifecycle helpers.

The wizard handle returned by `useWizard({ steps })`:

- `wizard.currentStep`, `wizard.activeForm`, `wizard.activeIndex`, `wizard.count`, `wizard.isFinalStep` position.
- `wizard.next()`, `wizard.back()`, `wizard.goTo(key)`, `wizard.tryNext()`, `wizard.reset()` navigation. `tryNext()` validates the active step and advances only if it passes; the others move the pin without validating.
- `wizard.handleSubmit(onSubmit, onError?)` whole-wizard submit. Validates every step from any position and calls `onSubmit` once with all values; it never advances (compose with `tryNext` / `next` to move between steps).
- `wizard.forms.<key>` typed map of step forms.
- `wizard.allValues`, `wizard.allErrors`, `wizard.statuses` namespaced aggregates.
- `wizard.progress`, `wizard.canAdvance`, `wizard.canGoBack`, `wizard.complete`, `wizard.done` derived signals.
- `wizard.submitting`, `wizard.submissionAttempts`, `wizard.visited` submission state.

## Idioms

Patterns that keep Attaform code clean.

- **Hoist schemas.** Declare `const schema = z.object({...})`, then pass `useForm({ schema })`. Inlining the Zod schema inflates the visible API surface in templates.
- **Use the form handle. Don't destructure.** `const form = useForm(...)`, then reach for `form.register('email')`, `form.setValue(...)`, etc. Destructuring loses the central noun and the reactive bindings.
- **Reach with `?.` on nullable returns.** `injectForm()` and `injectWizard()` return `T | null`. Chain optional access at every consumption site (`form?.register('email')`, `form?.fields.email.showErrors`). Skip the `!` non-null assertion; a single mount-order regression turns a quiet no-op into a runtime crash.
- **Read errors through `field.showErrors` and `field.firstError`.** The visibility heuristic lives in `showErrors`; reaching into `field.errors[0]` directly bypasses it.
- **Accessibility is automatic.** `v-register` keeps `aria-invalid`, `aria-busy`, `aria-required`, and `aria-describedby` in sync with each field's display state and emits them during SSR. Put `form.fields.<path>.aria.errorId` on the error element so `aria-describedby` resolves. Author any aria attribute yourself to take that one over, or pass `autoAria: false` to opt out.
- **Use `key` for stable forms.** Anonymous `useForm({ schema })` works for one-off forms. Pass `key: 'signup'` when you want cross-component lookup via `injectForm('signup')`.
- **Compose, don't nest.** For multistep flows, compose multiple `useForm` instances under `useWizard` rather than nesting concerns into one schema.
- **Native inputs first.** Bind to `<input>`, `<select>`, `<textarea>` with `v-register`. Reach for `useRegister` only when wrapping a custom component.
- **`form.values` is the verbatim input.** Values coerced by `z.coerce.*` or transformed by `z.preprocess` only materialise in the parsed `data` callback inside `form.handleSubmit((data) => ...)`.

## Getting started

- [Introduction](https://attaform.dev/docs/getting-started/introduction): Attaform is a type-safe, schema-driven form library for Vue 3 and Nuxt. Your Zod schema becomes the form, the validator, and the API contract in one move.
- [Why Attaform](https://attaform.dev/docs/getting-started/why-attaform): The case for picking Attaform for Vue 3 forms. Type-safe end to end, schema-driven defaults, layered validation, SSR-clean hydration, and built-in persistence, history, and devtools.
- [Installation](https://attaform.dev/docs/getting-started/installation): Install Attaform with one command. Optional setup sections cover the Nuxt module, the Vue 3 plugin, and the Vite plugin.
- [Quick start](https://attaform.dev/docs/getting-started/quick-start): Build your first Attaform in five minutes. A typed Zod schema, validated inputs bound by directive, and a submit handler that knows when the form is ready.
- [Your first schema](https://attaform.dev/docs/getting-started/your-first-schema): Attaform reads any Zod schema (required strings, optional fields, refinements, defaults) and turns it into a typed, reactive Attaform with no extra mapping.
- [From schema to inputs](https://attaform.dev/docs/getting-started/from-schema-to-inputs): The register + v-register pair turns a schema path into a typed two-way binding for any native input element: text, number, select, checkbox, textarea.
- [From inputs to submit](https://attaform.dev/docs/getting-started/from-inputs-to-submit): Wire a submit handler to a typed form. handleSubmit gates dispatch on validation, exposes the parsed values, and reports back through meta.submitting.
- [Demos](https://attaform.dev/demos)

## Comparison

- [Benchmarks](https://attaform.dev/docs/comparison/benchmarks): How Attaform compares across the Vue form-library field: bundle size, supply-chain scores, and per-scenario runtime measured in a real browser, every number traced to the run that produced it.

## Schemas

- [The schema contract](https://attaform.dev/docs/schemas/contract): A schema declares the shape, constraints, and transformations of a value. Attaform is schema-agnostic at the core and ships first-class Zod adapters.
- [Defaults from the schema](https://attaform.dev/docs/schemas/defaults): Schema-declared defaults flow into form.values at mount and on reset. defaultValues overlays them; unset opts a leaf back to blank. The schema is the source of truth.
- [How values are stored](https://attaform.dev/docs/schemas/storage-shape): form.values exposes the storage shape, the consumer's raw input with defaults resolved. Schema-side normalizers (preprocess, coerce, transforms) run at parse, not at the write boundary. handleSubmit gets the post-parse output.
- [Optional, nullable, defaulted](https://attaform.dev/docs/schemas/optional-nullable): Three modifiers, three different runtime behaviors. .optional() makes the slot absent, .nullable() makes null a valid value, .default(x) fills the slot when input is missing.
- [Discriminated unions](https://attaform.dev/docs/schemas/discriminated-unions): z.discriminatedUnion reshapes storage to the active variant's slim default. Inactive keys purge, new keys seed. The discriminator drives both runtime storage and conditional template rendering.
- [Variant forms](https://attaform.dev/docs/schemas/variant-forms): A z.discriminatedUnion schema can be the form root, not just a field. form.values reads the active variant at the top level, register binds variant fields by their own key, and a bare root defaults to the first variant.
- [Arrays & tuples](https://attaform.dev/docs/schemas/arrays-and-tuples): z.array() is variable-length, z.tuple() is fixed-length. Both bind through numeric path segments: register('items.0.name'), errors.tags[2], fields.items[3].title.
- [Records & maps](https://attaform.dev/docs/schemas/records): z.record() is a string-keyed dictionary with uniform value types; z.map() is the Map<K, V> primitive. Both bind through dynamic-key paths: register(`prefs.${userId}`), errors.scores[name].
- [Dictionary forms](https://attaform.dev/docs/schemas/dictionary-forms): A z.record schema can be the form root, not just a field. form.values is the dictionary itself, form.record() iterates the entries, and a bare record root defaults to an empty map.
- [Nested objects](https://attaform.dev/docs/schemas/nested-objects): z.object({ a: z.object({ b: z.string() }) }) composes through dot-path access: register('a.b'), errors.a.b, fields.a.b. Every nested object gets its own slim default at every level.
- [AbstractSchema](https://attaform.dev/docs/schemas/abstract-schema): The schema-agnostic contract the core consumes (12 required methods plus 2 optional hooks) covering identity, defaults, shape introspection, and validation. Implement it to wire any schema library into Attaform.

## Reading the form

- [The form](https://attaform.dev/docs/reading-the-form/the-form): useForm returns one reactive form carrying values, fields, errors, meta, register, handleSubmit, setValue, and reset, all typed against your schema.
- [values](https://attaform.dev/docs/reading-the-form/values): form.values is a drillable reactive Proxy keyed by schema paths. Read any leaf or container, anywhere, and Vue tracks the access for you.
- [fields](https://attaform.dev/docs/reading-the-form/fields): form.fields is a drillable Proxy keyed by schema paths. Every leaf surfaces a FieldState with state bits, value reads, validation reads, DOM handles, and schema metadata, all reactive.
- [list](https://attaform.dev/docs/reading-the-form/list): form.list reads an array as one FieldState per element, in index order, each carrying a stable key so a keyed v-for survives inserts, removals, moves, and swaps.
- [record](https://attaform.dev/docs/reading-the-form/record): form.record reads a record as one FieldState per entry, keyed by the entry's own key, so you iterate dynamic keys without tracking them yourself.
- [errors](https://attaform.dev/docs/reading-the-form/errors): form.errors is a reactive Proxy keyed by schema paths. Read any leaf's error list, with errors[0]?.message ready to render and the full array available for richer surfaces.
- [meta](https://attaform.dev/docs/reading-the-form/meta): form.meta is the form-level FieldState aggregation plus seven form-only reads, submitting, submissionAttempts, departAttempts, submitError, errorCount, submitted, and instanceId.
- [toRef](https://attaform.dev/docs/reading-the-form/to-ref): form.toRef hands you a Readonly<Ref<T>> at any schema path, for the rare consumer that needs a Vue ref instead of the values Proxy.
- [Type safety](https://attaform.dev/docs/reading-the-form/type-safety): Types follow the form through every state. In-flight reads are wide enough to hold whatever the user is actually typing; handleSubmit hands you the schema's validated output with literals narrowed, refinements honored, and discriminated unions discriminating.

## Binding inputs

- [The v-register directive](https://attaform.dev/docs/binding-inputs/v-register): v-register binds a native input to a schema path. The directive handles the value sync, the coercion, the dirty-tracking, and the focus pass while your input stays native.
- [useRegister](https://attaform.dev/docs/binding-inputs/use-register): The composable that lets a Vue wrapper component bind a parent's v-register onto an inner native element, for component shells whose root isn't the input itself.
- [Text, number, textarea](https://attaform.dev/docs/binding-inputs/text-number-textarea): The native text family (type="text", type="number", and <textarea>) all bind through v-register. The number input lands in storage as a number, the strings as strings.
- [Checkbox](https://attaform.dev/docs/binding-inputs/checkbox): A single checkbox binds to a boolean; multiple checkboxes sharing a register call bind to an array of the checked values. The directive reads the schema leaf type and picks the right mode.
- [Radio groups](https://attaform.dev/docs/binding-inputs/radio): Every radio sharing a register call belongs to the same group. The directive writes the checked option's value attribute into storage as the single picked value.
- [Select & multi-select](https://attaform.dev/docs/binding-inputs/select): <select> binds to a single picked value; <select multiple> binds to an array of picked values. The directive reads the schema leaf type and picks the mode automatically.
- [File inputs](https://attaform.dev/docs/binding-inputs/file): <input type="file"> binds to a single File (or null when empty); type="file" multiple binds to a File[]. Live File handles, ready for FormData or upload.
- [Modifiers](https://attaform.dev/docs/binding-inputs/modifiers): Three modifiers (.lazy, .trim, .number) adjust how v-register writes back to storage on every keystroke or pick. Each composes with any text-family or select binding.
- [Register transforms](https://attaform.dev/docs/binding-inputs/transforms): A per-field transforms array on register() composes write-time transformations left-to-right. Trim and dashify in the same tick, or return a Promise to normalize asynchronously while the field reads busy.
- [Schema-driven coercion](https://attaform.dev/docs/binding-inputs/coercion): The default coercion registry turns DOM strings into numbers and booleans automatically. Compose your own entries to coerce any leaf type.
- [Custom assigners](https://attaform.dev/docs/binding-inputs/custom-assigners): For elements whose value surface isn't a DOM property, assignKey installs a per-element function that decides what to write to form state when the directive sees an event.
- [Third-party components](https://attaform.dev/docs/binding-inputs/third-party-components): Bind a component from any Vue library with the same v-register you use on a native input. Attaform reaches in for the value and the field state, with escape hatches for the rest.

## Writing & mutating

- [setValue patterns](https://attaform.dev/docs/writing-and-mutating/set-value): form.setValue is the programmatic write surface, set the whole form, one path, or a segment-tuple, with values or a callback. Every directive write flows through the same pipeline.
- [reset & resetField](https://attaform.dev/docs/writing-and-mutating/reset): reset() restores the whole form to its defaults; resetField(path) restores one field. Both wipe dirty / touched state along with the value.
- [clear & blank values](https://attaform.dev/docs/writing-and-mutating/clear): clear writes the schema-slim empty value at one path or the whole form, `''` for strings, `0` for numbers, `[]` for arrays, `false` for booleans. Defaults are intentionally skipped.
- [unset](https://attaform.dev/docs/writing-and-mutating/unset): Pass the unset sentinel at any path in defaultValues, setValue, or reset. The runtime writes the schema's slim value (recursively for containers) and joins every primitive descendant to form.blankPaths, so the bound input renders empty.
- [Field-array mutations](https://attaform.dev/docs/writing-and-mutating/field-arrays): Seven helpers (append, prepend, insert, remove, swap, move, replace) typed against every ArrayPath in your schema. Stable per-item validation and dirty tracking across every shape change.
- [Variant memory](https://attaform.dev/docs/writing-and-mutating/variant-memory): rememberVariants keeps the inactive variant's typed subtree alive so switching back restores it. Opt out for wizards that should reset on backtrack, or for memory-constrained targets.

## Validation

- [When validation runs](https://attaform.dev/docs/validation/when-validation-runs): Attaform validates per field on change, blur, or submit, your call, per form. Sync refinements fire immediately; async refinements await.
- [Per-field validation](https://attaform.dev/docs/validation/per-field-validation): Schema-level chains attach validators to one field at a time; .refine on the parent object attaches cross-field refinements with a target path. Both surface the error at the right field.
- [Async refinements](https://attaform.dev/docs/validation/async-refinements): Zod's async .refine predicates run alongside sync ones. The directive surfaces fields.<path>.validating while they're in flight, and handleSubmit awaits every pending refinement before dispatch.
- [URL availability check](https://attaform.dev/docs/validation/url-availability-check): Preprocess prepares the value, async refine validates it. A small sentinel handoff lets refine skip the API call when preprocess already knows the input is empty or malformed, and a cache keeps repeat checks free.
- [The validation lifecycle](https://attaform.dev/docs/validation/lifecycle): validate(), validateAsync(), and parse() are the three imperative entry points to the validator. Same predicates, different return shapes; pick by what you need to do next.
- [Display state and showing errors](https://attaform.dev/docs/validation/showing-errors): getDisplayState resolves every path to one verdict (idle, pending, error, or success). The default holds errors back until a field is edited and blurred or the form is submitted, surfaces a spinner while async checks run, and confirms a clean field with an earned success, never duplicating errors a more-specific descendant already renders.
- [The blank field-state bit](https://attaform.dev/docs/validation/blank): A storage / display side-channel for numeric inputs. Storage holds `0` while the user sees empty; `blankPaths` tracks the divergence so submit doesn't lie.

## Submitting

- [handleSubmit](https://attaform.dev/docs/submitting/handle-submit): handleSubmit wraps a submit callback in Attaform's validation gate. Values reach onSubmit only after every async refinement has settled, with focus pulled to the first invalid field if not.
- [Server-side errors](https://attaform.dev/docs/submitting/server-side-errors): form.setErrors mounts server errors into the same reactive surface the validator uses. One shape in (an Error or { message?, path?, code?, data? }), one shape out (ValidationError).
- [Focus & scroll on invalid submit](https://attaform.dev/docs/submitting/focus-scroll): handleSubmit pulls focus to the first invalid field by default. focusFirstError and scrollToFirstError are the imperative escape hatches when the default isn't enough.

## Cross-cutting state

- [Undo & redo](https://attaform.dev/docs/cross-cutting-state/undo-redo): history opt-in unlocks a per-form undo/redo chain. Every mutation records a position, undo() and redo() walk the timeline, clear() reseeds at a milestone.
- [Autosave](https://attaform.dev/docs/cross-cutting-state/autosave): A copy-paste useAutosave recipe over a watch on form.values. Per-field status, an aggregate isSaving, a validity gate, and debounced writes, with no new dependency and the save policy in your hands.
- [injectForm](https://attaform.dev/docs/cross-cutting-state/inject-form): Reach any registered form from anywhere in the component tree, no props drilling, no ref forwarding. Ambient resolution for nested components, keyed lookup for distant ones.
- [App-wide defaults](https://attaform.dev/docs/cross-cutting-state/app-defaults): createAttaform sets app-level defaults (validateOn, debounceMs, history, coercion) that every useForm in the app inherits. Per-form options always win the merge.

## Multistep flows

- [useWizard](https://attaform.dev/docs/multistep/use-wizard): useWizard takes an ordered list of step slots and produces a reactive wizard. Forms gather data, bare string keys mark affordance steps (intros, terms, review surfaces), function slots branch on live values, and lazy() memoizes heavy slots by their own tracked reactive reads. Whole-wizard handleSubmit, namespaced aggregates, automatic URL sync.
- [injectWizard](https://attaform.dev/docs/multistep/inject-wizard): Reach a useWizard handle from any descendant component. Ambient resolution for the parent's own wizard, keyed resolution for distant ones. Returns the same reactive wizard that useWizard exposes; mutations on one are observable on the other.
- [Step slots](https://attaform.dev/docs/multistep/step-slots): Slots are the entries that fill useWizard's steps array. Four kinds compose the list freely. Form slots gather data, string slots mark affordance screens, function slots branch on live values, and lazy() gives heavy slots their own memoized cache that re-fires only on its tracked reactive reads. Each slot compiles into the same uniform { key, form } shape so navigation, status aggregation, and submission read uniformly across the whole flow.
- [Statuses](https://attaform.dev/docs/multistep/statuses): wizard.statuses surfaces a per-step FormStatus rollup (valid, dirty, submitted, errorCount) ready for progress rails, navigation gates, and submit summaries. Read it drillably, call it for a snapshot, or seed it up-front with defaultStatuses for resumable flows.
- [Aggregates](https://attaform.dev/docs/multistep/aggregates): wizard.allValues, wizard.allErrors, and wizard.forms expose cross-step state ready for review screens, summary panels, and final-submit aggregation. Each surface is a record keyed by step key, drillable straight into the underlying form.
- [handleSubmit](https://attaform.dev/docs/multistep/handle-submit): wizard.handleSubmit(onSubmit, onError?) returns one event handler that validates the entire wizard from any step and calls onSubmit once with every step's values. It never advances; gate advancing a step on its validity with wizard.tryNext().
- [URL sync](https://attaform.dev/docs/multistep/url-sync): Wizards round-trip the active step through the URL by default. ?step=<key> writes on every navigation, reloads land on the same step, and deep links render the right step on the first byte under SSR. Opt out with restore false / persist false, or swap in custom callbacks for non-URL storage.
- [Patterns](https://attaform.dev/docs/multistep/patterns): Idiomatic wizard patterns. Linear flows, branching with function slots, dynamic terminals, active-step persistence, per-step undo. Small primitives composed through the steps array without library-side magic.

## Server & SSR

- [SSR hydration: Nuxt](https://attaform.dev/docs/server-and-ssr/ssr-nuxt): Server-rendered Vue 3 forms round-trip values, errors, and field flags to the client automatically via attaform/nuxt. No hydration flicker, no manual wiring.
- [SSR hydration: bare Vue](https://attaform.dev/docs/server-and-ssr/ssr-bare-vue): Wire renderAttaformState / hydrateAttaformState into your @vue/server-renderer pipeline. Two functions, one inline payload tag, no Nuxt required.
- [Performance](https://attaform.dev/docs/server-and-ssr/performance): Measured numbers for keystrokes, validation, submit, persistence, and the array helpers. Sub-500-leaf forms don't surface in profiling; the patterns to watch on bigger forms.

## DevTools & debugging

- [The Attaform DevTools panel](https://attaform.dev/docs/devtools-and-debugging/devtools-panel): Every registered form shows up in the Nuxt DevTools sidebar with values, errors, aggregates, and a timeline of every change. Auto-wired by attaform/nuxt, dev-gated at the module level.
- [Vue DevTools integration](https://attaform.dev/docs/devtools-and-debugging/vue-devtools): Vite and bare-Vue projects get an Attaform inspector + timeline in the Vue DevTools extension via an optional peer dependency. Same data as the Nuxt panel, different surface.
- [Troubleshooting](https://attaform.dev/docs/devtools-and-debugging/troubleshooting): Common Attaform pitfalls and how to fix them. Shared-form key collisions, missing v-register elements, hydration drift, handleSubmit bindings, never-typed register reads.

## Reference

- [Types reference](https://attaform.dev/docs/reference/types): Every public type Attaform exports, grouped by purpose. Inference flows from useForm; consumers rarely need to reach for these directly, but they're documented for advanced wiring.
- [Errors reference](https://attaform.dev/docs/reference/errors): Every Attaform-emitted error class and every AttaformErrorCode. Catch AttaformError once, branch on subclass, and code-key Attaform's validations through the small set of stable identifiers.
- [Entry-point reference](https://attaform.dev/docs/reference/entry-points): Every package subpath Attaform exposes and what ships from each. Import-path picker for adopters, anchor-keyed map of the public surface.
- [AI agents](https://attaform.dev/docs/reference/ai-agents): The tooling Attaform ships for AI coding assistants. A generated llms.txt index, a full-text llms-full.txt dump, and an installable Attaform skill, so an agent builds a form the idiomatic way the first time.
- [Custom schema adapters](https://attaform.dev/docs/reference/custom-adapters): Implement the AbstractSchema contract (12 required methods plus 2 optional hooks) to wire any schema library into Attaform. Identity, defaults, shape introspection, validation.

## Interactive

- [Demos](https://attaform.dev/demos): every docs demo as a standalone editable playground.

## Optional

- [GitHub](https://github.com/attaform/Attaform): source, issues, discussions.
- [npm](https://www.npmjs.com/package/attaform): published versions and install command.
- [CHANGELOG](https://github.com/attaform/Attaform/blob/main/CHANGELOG.md): release history.

## Author

Attaform is created and maintained by [Oswald Chisala](https://www.linkedin.com/in/chisalao/) ([@ozzyfromspace](https://github.com/ozzyfromspace) on GitHub).