Introduction

Form Wire is a type-safe form library for React that generates forms from Zod schemas. Define your schema once, get a fully validated form with server actions, wizard flows, array fields, and conditional visibility — with zero boilerplate.

Why Form Wire?

• Schema-first — Your Zod schema is the single source of truth for fields, types, and validation
• Server actions — Built-in createAction for Next.js server actions with typed results
• Wizard flows — Multi-step forms with per-step validation out of the box
• Array fields — String arrays and object arrays with add, remove, and reorder controls
• Conditional fields — Show/hide fields based on other values with requiredWhenVisible
• Async validation — Per-field async validators with stale-response protection
• Draft persistence — Auto-save form progress to localStorage or a custom adapter
• UI-agnostic — The mapper pattern decouples form logic from rendering. Use plain HTML, shadcn/ui, or build your own

Package Overview

Architecture

Zod Schema
    ↓
Form Model (field metadata)
    ↓
FormWireMapper (renders UI components)
    ↓
Server Action (validates + processes)

1. You define a Zod schema describing your data
2. createFormWire introspects it into a FormModel with field metadata
3. A FormWireMapper maps each field kind to a UI component
4. On submit, a server action validates against the schema and returns typed results