zod-auto-form

A React library for automatic form generation using Zod schemas.

Features

• 🚀 Automatically generate forms from Zod schemas
• 🧩 Customizable components for each field type
• 🔍 Input validation using Zod
• 🎨 Flexible styling options
• 📱 Responsive form layouts
• 🔄 Support for complex nested objects and arrays
• 👁️ Field visibility rules for conditional rendering
• 🛠️ Field type overrides for custom input components

Installation

npm install zod-auto-form zod
# or
yarn add zod-auto-form zod
# or
pnpm add zod-auto-form zod

Default Components

You can quickly get started with the default shadcn/ui components:

# Using npm
npx shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-form-component.json

# Using pnpm
pnpm dlx shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-form-component.json

# Using Bun
bunx --bun shadcn@latest add https://raw.githubusercontent.com/atul7017128880/component-registry/refs/heads/master/public/registry/auto-form-component.json

Quick Start

import { z } from 'zod';
import { AutoForm, AutoFormComponentsProvider } from 'zod-auto-form';
import YourCustomComponents from './your-components';
import { ComponentRegistry } from '../shadcn-ui-components';
// 1. Define your schema with Zod
const userFormSchema = z.object({
  name: z.string().min(2, "Name must be at least 2 characters"),
  email: z.string().email("Invalid email address"),
  age: z.number().min(18, "Must be at least 18 years old"),
  isSubscribed: z.boolean().default(false),
});

// 2. Create your form component
function UserForm() {
  return (
    <AutoFormComponentsProvider components={ComponentRegistry  or YourCustomComponents}>
      <AutoForm
        formSchema={userFormSchema}
        onSubmit={(values) => {
          console.log(values);
          // Handle form submission
        }}
        onSubmitError={(error, errorMessages, values) => {
          console.error('Form validation failed:', errorMessages);
        }}
      />
    </AutoFormComponentsProvider>
  );
}

Component Registration

You need to provide your UI components through the AutoFormComponentsProvider:

import { AutoFormComponentsProvider,ComponentRegistry} from 'zod-auto-form';

// Your custom form components that match the expected interfaces fully typed
const myComponents = ComponentRegistry({
  Input: MyTextInput,
  Select: MySelectComponent,
  NumberInput: MyNumberInput,
  // ... other component types
});

function App() {
  return (
    <AutoFormComponentsProvider components={myComponents}>
      {/* Your app/forms here */}
    </AutoFormComponentsProvider>
  );
}

Supported Field Types

• string - Text inputs
• number - Numeric inputs
• boolean - Checkboxes and switches
• array - Array fields with add/remove functionality
• object - Nested object fields
• select - Dropdown select fields
• multi-select - Multiple selection fields
• date - Date/time pickers
• textarea - Multi-line text inputs
• switch - Toggle switches
• radio - Radio button groups

Advanced Usage

Field Type Overrides

Override the automatically determined field types:

<AutoForm
  formSchema={schema}
  fieldTypeOverrides={{
    description: {
      typeOfField: "textarea",
    },
  }}
  // ...
/>

Visibility Rules

Control which fields are displayed based on other field values:

<AutoForm
  formSchema={schema}
	visibilityRules={[
					{
						sourceFields: ["age"],
						targetField: "address",
						when: (values) => values.age > 18,
						type: "show",
					},
					{
						sourceFields: ["name"],
						targetField: "address.city",
						when: (values) => values.name === "John",
						type: "show",
					},
				]}
  // ...
/>

Grouped Fields

Organize fields into logical groups:

// The library will automatically detect and group fields defined in nested objects
<AutoForm
  formSchema={schema}
		groupByZodKeys={{
					Users: ["age", "name"],
					Address: ["address"],
				}}
  // ...
/>

Change Position of Fields

Change the position of fields:

<AutoForm
  formSchema={schema}
		changePositionOfFields={{
					nested: {
						age: {
							position: 0,
						},
						name: {
							position: 1,
						},
						address: {
							position: 2,
							nested: {
								city: {
									position: 0,
								},
								street: {
									position: 1,
								},
							},
						},
					},
				}}
  // ...
/>

API Reference

<AutoForm> Props

| Prop | Type | Description | |------|------|-------------| | formSchema | z.ZodSchema | The Zod schema used to generate the form | | fieldTypeOverrides | object | Override the automatically determined field types | | changePositionOfFields | object | Change the position of fields | | groupByZodKeys | object | Group fields by Zod keys | | visibilityRules | object | Rules for conditionally showing/hiding fields | | defaultValues | object | Initial values for the form fields | | formId | string | Optional ID for the form element | | onSubmit | function | Callback when form is successfully submitted | | onSubmitError | function | Callback when validation fails on submission |

<AutoFormComponentsProvider> Props

| Prop | Type | Description | |------|------|-------------| | components | object | Custom UI components for rendering different field types | | children | ReactNode | Child components that will use the provided form components |

<ComponentRegistry> Props

| Prop | Type | Description | |------|------|-------------| | components | object | Custom UI components for rendering different field types |

My Info

• Name: [@atul-kumar]
• Email: [email protected]

License

MIT