Type-safe, schema-driven forms for React. Define once, render everywhere — zero boilerplate.
Define a Zod schema. Morphorm derives your fields, layout, and validation — automatically.
Fields subscribe to other fields. Labels, placeholders, disabled — all update live without wiring.
Override any field with your own component. Full access to field state via useFieldContext.
Responsive 12-column grid built in. Each field has a size prop. Fill spacers break rows.
import { Form } from "morphorm"
import * as z from "zod"
const schema = z.object({
name: z.string().min(2),
email: z.string().email(),
subscribe: z.boolean(),
})
export function MyForm() {
return (
<Form
schema={schema}
showSubmit
fields={[
{ name: "name", type: "text", size: 6 },
{ name: "email", type: "text", size: 6 },
{ name: "subscribe", type: "checkbox", size: 12 },
]}
/>
)
}import { Form } from "morphorm"
import * as z from "zod"
const schema = z.object({
name: z.string().min(1),
email: z.string().email(),
notify: z.boolean(),
})
export function MyForm() {
return (
<Form
schema={schema}
showSubmit
/>
)
}