Core Concepts
Form Model
How Form Wire introspects schemas into field metadata
The FormModel is the internal representation of your schema — an array of FormField objects with rendering metadata. It's created automatically by createFormWire.
How It Works
Zod Schema → createFormModel() → FormModelcreateFormModel walks the Zod schema recursively and produces a flat list of FormField objects:
interface FormField {
name: string; // "profile.firstName"
kind: string; // "string" | "boolean" | "select" | ...
label: string; // Human-readable label (auto-generated or from config)
required: boolean; // From schema optionality
hidden: boolean; // From config
readOnly: boolean; // From config
disabled: boolean; // From config
description?: string; // Help text
placeholder?: string; // Input placeholder
options?: FormFieldOption[]; // For select fields
// ... more fields
}Accessing the Model
Use the useFormModel hook inside a form:
import { useFormModel } from "@form-wire/react";
function MyCustomComponent() {
const model = useFormModel();
// model.fields — array of FormField
// model.fieldMap — Record<string, FormField>
}Nested Objects
Nested Zod objects produce dotted field names:
z.object({
profile: z.object({
firstName: z.string(),
lastName: z.string(),
}),
});Produces fields: profile.firstName, profile.lastName
The mapper renders them inside a <fieldset> group by default.
Label Generation
If no label is provided, Form Wire generates one from the field name:
firstName→ "First Name"profile.firstName→ "First Name" (last segment only)emailAddress→ "Email Address"
Override with config or withMeta.