Skip to main content

​
Introduction

​
Create form instance

For this tutorial, we will start from a basic zodaf form example, to learn how to create a basic zodaf from, please refer to the Basic Usage guide.
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} />;
}
image

​
Basic Features

​
Customizing form fields

You can easily customize form fields by passing a config object to the useAutoForm function. The config can take the following properties:
​
fieldsConfig
Record<keyof schema, ZodafFieldConfig>
Object that defines the form fields configuration. The key is the field name and the value is a ZodafFieldConfig object.Example:
const fieldsConfig = {
	name: {
		label: "Your full name",
		placeholder: "John Doe",
	},
	email: {
		description: "Your email must be unique",
		fieldType: "email-with-auto-complete",
	},
	age: {
		label: "Age",
		placeholder: "Enter your age",
		disabled: true,
		props: {
			className: "bg-gray-100",
		},
	},
};
const form = useAutoForm(schema, { fieldsConfig });
See the configuration section for more details.

​
Handling form events

​
onSubmit
Function
Function that is called when the form is submitted. The function receives the type-safe form data as an argument.Example:
const onSubmit = (data) => {
	console.log(data);
};

const form = useAutoForm(schema, { onSubmit });
​
onChange
Function
Function that is called when the form has changes. The function receives the type-safe form data as an argument.Example:
const onChange = (data) => {
	console.log(data);
};

const form = useAutoForm(schema, { onChange });
​
submitLabel
string
Label for the submit button.Example:
const form = useAutoForm(schema, { submitLabel: "Save" });
Note: Ensure that the submitLabel is used with a submit component that supports a children prop.
​
submitHidden
boolean
Hide the submit button. Defaults to false.Example:
const form = useAutoForm(schema, { submitHidden: true });
Component will render without a submit button.