zod-forms

Zod Forms is a library for building forms in React using Zod for validation.

Usage

To use zod-forms you need to create a form schema using Zod. The schema is a plain object with keys corresponding to the form fields and values corresponding to the validation rules. For example:

import z from 'zod';

export const demoSchema = z.object({
    name: z
        .string()
        .nonempty('Name is required')
        .min(2, {message: 'Must be 2 or more characters long'}),
    age: z.number(),
});

For more information on Zod validation rules see the Zod documentation.

You can then use the useZodForm hook to create a form component. Here is a simple example:

import React from 'react';
import {useZodForm} from 'zod-forms';
import {demoSchema} from './DemoSchema';

export function TestComponent() {
    const {Form} = useZodForm(demoSchema);

    return (
        <div>
            <Form.Fields.name.Input>
                <input placeholder="Your Name" />
            </Form.Fields.name.Input>
            <Form.Fields.age.Input>
                <input placeholder="Your Age" />
            </Form.Fields.age.Input>
        </div>
    );
}