Quickstart

Installation

pnpm i @zodform/core zod

Basic

All you need to create a very basic form is a Zod schema.

import { Form } from '@zodform/core';
import { z } from 'zod';
 
const schema = z.object({
  name: z.string(),
  age: z.number()
});
 
export function PersonForm() {
  return <Form schema={schema} />;
}

This will render a form with a text input for the name and a number input for the age. It will also render a submit button and use the schema that you provided to validate the form on submit.

UI Schema

Since the Zod schema has a limited amount of information about how the form should look, you will likely want to use the UI schema to further customize the form (for example, to change the label).

import { Form, FormUiSchema } from '@zodform/core';
import { z } from 'zod';
 
const schema = z.object({
  name: z.string(),
  age: z.number()
});
 
const uiSchema: FormUiSchema<typeof schema> = {
  name: {
    label: 'Name'
  },
  age: {
    label: 'Age'
  }
};
 
export function PersonForm() {
  return <Form schema={schema} uiSchema={uiSchema} />;
}

Note that both the schema and UI schema are defined outside of the component. This is to avoid creating a new object every time the PersonForm renders. Providing stable references for the schemas enables the form to make optimizations in order to avoid re-rendering the inputs whose values haven't changed.

OverviewTutorial