Components

Form

Renders a <form> element with all visible fields auto-appended. Accepts all standard <form> HTML attributes except children and action.

<Contact.Form
  action={submitAction}
  mapper={customMapper}
  defaultValues={{ name: "Ada" }}
  validationTiming="onBlur"
  draftPersistence={{ key: "my-draft", adapter: localStorageAdapter() }}
  className="my-form"
/>

Props

Prop	Type	Description
`action`	`ActionHandler`	Server action (required)
`mapper`	`FormWireMapper`	Override the provider mapper
`defaultValues`	`DeepPartial<SchemaOutput>`	Initial values
`validationTiming`	`"onSubmit" \| "onBlur" \| "onChange"`	When to validate
`draftPersistence`	`DraftPersistenceConfig`	Auto-save config

Wizard

Same props as Form, plus:

Prop	Type	Description
`nextLabel`	`string`	Label for the Next button
`previousLabel`	`string`	Label for the Previous button
`submitLabel`	`string`	Label for the final Submit button
`children`	`ReactNode`	Must contain `<Step>` components

Field

Renders a single field by name.

<Contact.Field name="email" className="my-field" />

Override presentation state per-field:

<Contact.Field name="email" hidden={false} readOnly disabled />

Fields

Renders a list of named fields in order:

<Contact.Fields names={["name", "email"]} />

If names is omitted, renders all fields.

Step

Declares a wizard step:

<Wizard.Step title="Contact Info">
  <Wizard.Field name="email" />
</Wizard.Step>

When

Conditionally renders children:

<Contact.When field="type" equals="business">
  <Contact.Field name="company" />
</Contact.When>

// or with a predicate
<Contact.When matches={(values) => values.type === "business"}>
  <Contact.Field name="company" />
</Contact.When>

Row

Horizontal layout helper for fields:

import { Row } from "@form-wire/react";

<Row columns={2}>
  <Contact.Field name="firstName" />
  <Contact.Field name="lastName" />
</Row>

FormWireProvider

Provides a mapper and validation timing to a subtree:

<FormWireProvider mapper={htmlMapper} validationTiming="onBlur">
  {children}
</FormWireProvider>

Components

On this page