ZodV4Form

Github

npm config set registry https://registry.npmjs.org

npm install zodv4-form [email protected] react react-dom

Motivation

Focused on headless form validation and UI.

Basic Example

Playground

import { ZodV4Form } from 'zodv4-form'
import { z } from 'zod'

const App = () => (
  <ZodV4Form
    schema={z.object({
      email: z.email(),
    })}
    onSubmit={console.log}
    components={{}}
  />
)

API Reference

| Props | Type | Default | Description | | --- | --- | --- | --- | | schema | ZodObject | - | Zod Schema object, defining the form structure and validation rules | | onSubmit | (data: T) => void | - | Form submission callback function, receiving validated data | | defaultValues | Partial<T> | {} | Form default values | | components | TComponentMap | Built-in components | Custom component mapping table | | className | string | '' | CSS class name for the form container | | fieldClassName | string | '' | CSS class name for the form field container | | renderFooter | (props) => ReactNode | Default buttons | Custom footer area | | renderFields | (props) => ReactNode | - | Custom field rendering |