Auto Form
Generates forms based on Zod schemas and react-hook-form with validation and input controls.
AutoForm creates interactive, accessible forms automatically from a Zod schema. It handles validation, error messages, and submits without boilerplate.
Preview
Quick start
Define a Zod validation schema and pass it with field descriptors to <AutoForm />:
import { AutoForm } from "@vitnode/core/components/form/auto-form"
import { AutoFormInput } from "@vitnode/core/components/form/fields/input"
import { AutoFormSelect } from "@vitnode/core/components/form/fields/select"
import { AutoFormTextarea } from "@vitnode/core/components/form/fields/textarea"
import { toast } from "sonner"
import { z } from "zod"
const formSchema = z.object({
username: z.string().min(3, "Username must be at least 3 characters"),
email: z.string().email("Invalid email address"),
role: z.enum(["admin", "editor", "viewer"]).default("editor"),
bio: z.string().optional(),
})
export const UserForm = () => {
return (
<AutoForm
formSchema={formSchema}
onSubmit={async (values) => {
await saveUser(values)
toast.success("User saved successfully!")
}}
fields={[
{
id: "username",
component: (props) => <AutoFormInput {...props} label="Username" />,
},
{
id: "email",
component: (props) => <AutoFormInput {...props} label="Email Address" />,
},
{
id: "role",
component: (props) => (
<AutoFormSelect
{...props}
label="Role"
labels={[
{ value: "admin", label: "Admin" },
{ value: "editor", label: "Editor" },
{ value: "viewer", label: "Viewer" },
]}
/>
),
},
{
id: "bio",
component: (props) => <AutoFormTextarea {...props} label="Bio" />,
},
]}
/>
)
}Supported Field Components
| Component | Target Zod Type | Description |
|---|---|---|
AutoFormInput | z.string(), z.number() | Standard text and numeric inputs |
AutoFormTextarea | z.string() | Multi-line text area |
AutoFormSelect | z.enum([...]) | Dropdown select menu |
AutoFormCheckbox | z.boolean() | Single toggle checkbox |
AutoFormSwitch | z.boolean() | Switch toggle control |
AutoFormEditor | z.string() | Rich text Tiptap editor |
AutoFormArray | z.array(z.object(...)) | Dynamic list with add/remove actions |
Common Features
1. Dynamic Lists (AutoFormArray)
Render dynamic, repeatable sets of fields:
const formSchema = z.object({
links: z.array(
z.object({
label: z.string().min(1),
url: z.string().url(),
})
),
})
// In fields configuration:
{
id: "links",
component: (props) => (
<AutoFormArray
{...props}
label="External Links"
fields={[
{ id: "label", component: (p) => <AutoFormInput {...p} label="Label" /> },
{ id: "url", component: (p) => <AutoFormInput {...p} label="URL" /> },
]}
/>
),
}2. Labels, Descriptions & Placeholders
Configure input helpers directly in the component:
{
id: "username",
component: (props) => (
<AutoFormInput
{...props}
label="Username"
placeholder="e.g. jdoe"
description="Your unique public identifier."
/>
),
}<AutoForm> Props
Prop
Type