Introduction
Schema-driven, headless, themeable React forms on top of React Hook Form + Zod.
ReactFormSwitch turns a plain JSON-ish schema into a rendered, validated, themeable React form. It is a thin rendering + theming + serialization layer on top of React Hook Form (state) and Zod (validation) — ReactFormSwitch owns the config-to-UI part, RHF owns the hard state part.
v1.1.0 ships single-page and multi-step forms, ten built-in field types
(including drag-and-drop image upload), JSON-authored look & behavior (no raw CSS),
json / formdata / xml serialization, and three plain registries for adding your
own fields, serializers, and loaders.
Why ReactFormSwitch
- 🧩 Schema, not JSX — describe fields as data; ReactFormSwitch renders and wires them.
- 🎛️ Headless + themeable — every visual is a
--fs-*CSS variable, or set it from JSON viaui. No stylesheet authoring required. - 🔒 Real validation — a Zod validator per field, or pure-JSON
ruleswith custom messages. Backed by React Hook Form. - 📦 Payload-aware — submit as
json,formdata, orxml; image fields serialize correctly per payload. Register your own serializer too. - 📱 Responsive by container —
colspans map to a 12-column grid driven by container queries, not JS media queries.
At a glance
import { FormSwitch } from 'reactformswitch'
import 'reactformswitch/styles.css'
import { z } from 'zod'
<FormSwitch
theme="light"
schema={{
payload: 'json',
fields: [
{ name: 'name', type: 'text', label: 'Name', validation: z.string().min(1) },
{ name: 'email', type: 'email', label: 'Email', validation: z.string().email() },
],
}}
onSubmit={(payload, values) => console.log(payload, values)}
/>Continue to Installation, then the Quick start.