Basic Usage

Learn how to use basic zodaf auto-form features

Create form instance

To create a form instance, use the useAutoForm function from @zodaf/react package. The createForm function accepts two arguments:

1. schema: A zod schema object that defines the form fields and validation rules.
2. config: An object that defines the form configuration. This is optional.

app/page.tsx

const schema = z.object({
	name: z.string().describe("Your full name"),
	email: z.string().email().describe("Your email address"),
	age: z.number().int().min(18).describe("Your age"),
});

const form = useAutoForm(schema);

Rendering form

To render the form, use the AutoForm component from @zodaf/react package. The AutoForm component accepts the form instance as a prop.

app/page.tsx

<AutoForm form={form} />

Full code

app/page.tsx

import { z } from "zod";
import { useAutoForm, AutoForm } from "@zodaf/react";

const schema = z.object({
	name: z.string().describe("Your full name"),
	email: z.string().email().describe("Your email address"),
	age: z.number().int().min(18).describe("Your age"),
});

export default function Page() {
	const form = useAutoForm(schema);
	return <AutoForm form={form} />;
}

Result