AutoFormAutoForm
TanStack Form

Getting Started

Render AutoForm with the TanStack Form adapter.

New to AutoForm? Check out the introduction first.

The TanStack Form route uses the same schema providers and UI packages as the React Hook Form route, but imports the form adapter from each package's tanstack-form subpath.

Install the AutoForm Agent Skill (optional)

If you use AI coding assistants (such as Cursor, Claude Code, OpenCode, or GitHub Copilot), you can install the AutoForm skill. It gives your coding agent access to AutoForm-specific documentation, examples, and best practices.

npx skills add https://github.com/vantezzen/autoform/tree/main/skills --skill autoform
pnpm dlx skills add https://github.com/vantezzen/autoform/tree/main/skills --skill autoform
yarn skills add https://github.com/vantezzen/autoform/tree/main/skills --skill autoform
bunx --bun skills add https://github.com/vantezzen/autoform/tree/main/skills --skill autoform

Install AutoForm's form engine

Install TanStack Form and the AutoForm React base package:

npm install @autoform/react @tanstack/react-form
pnpm add @autoform/react @tanstack/react-form
yarn add @autoform/react @tanstack/react-form
bun add @autoform/react @tanstack/react-form

Install AutoForm's integration to your UI library

AutoForm integrates directly into your UI library to render fields. Choose one official integration:

Shadcn/ui

npx shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform-tanstack.json
pnpm dlx shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform-tanstack.json
yarn shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform-tanstack.json
bunx --bun shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform-tanstack.json

Use the generated TanStack adapter export:

import { AutoForm } from "@/components/ui/autoform/tanstack-form";

Material UI

peer dependencies
{
  "@mui/material": "^6",
  "@mui/icons-material": "^6",
  "@emotion/react": "^11",
  "@emotion/styled": "^11"
}
npm install @mui/material@^6 @mui/icons-material@^6 @emotion/react@^11 @emotion/styled@^11
pnpm add @mui/material@^6 @mui/icons-material@^6 @emotion/react@^11 @emotion/styled@^11
yarn add @mui/material@^6 @mui/icons-material@^6 @emotion/react@^11 @emotion/styled@^11
bun add @mui/material@^6 @mui/icons-material@^6 @emotion/react@^11 @emotion/styled@^11
npm install @autoform/mui
pnpm add @autoform/mui
yarn add @autoform/mui
bun add @autoform/mui
import { AutoForm } from "@autoform/mui/tanstack-form";

Mantine

peer dependencies
{
  "@mantine/core": "^7",
  "@mantine/dates": "^7"
}
npm install @mantine/core@^7 @mantine/dates@^7
pnpm add @mantine/core@^7 @mantine/dates@^7
yarn add @mantine/core@^7 @mantine/dates@^7
bun add @mantine/core@^7 @mantine/dates@^7
npm install @autoform/mantine
pnpm add @autoform/mantine
yarn add @autoform/mantine
bun add @autoform/mantine
import { AutoForm } from "@autoform/mantine/tanstack-form";

Ant Design

peer dependencies
{
  "antd": "^5"
}
npm install antd@^5
pnpm add antd@^5
yarn add antd@^5
bun add antd@^5
npm install @autoform/ant
pnpm add @autoform/ant
yarn add @autoform/ant
bun add @autoform/ant
import { AutoForm } from "@autoform/ant/tanstack-form";

Chakra UI

peer dependencies
{
  "@chakra-ui/react": "^3.8",
  "@emotion/react": "^11.14"
}
npm install @chakra-ui/react@^3.8 @emotion/react@^11.14
pnpm add @chakra-ui/react@^3.8 @emotion/react@^11.14
yarn add @chakra-ui/react@^3.8 @emotion/react@^11.14
bun add @chakra-ui/react@^3.8 @emotion/react@^11.14
npm install @autoform/chakra
pnpm add @autoform/chakra
yarn add @autoform/chakra
bun add @autoform/chakra
import { AutoForm } from "@autoform/chakra/tanstack-form";

If you want to integrate into another UI library and create a custom package, check out the custom integration guide.

Install AutoForm's integration to your schema library

Zod

npm install @autoform/zod
pnpm add @autoform/zod
yarn add @autoform/zod
bun add @autoform/zod
Requires zod version greater than 3.25.0 to be installed.

Yup

npm install @autoform/yup
pnpm add @autoform/yup
yarn add @autoform/yup
bun add @autoform/yup

Joi

npm install @autoform/joi
pnpm add @autoform/joi
yarn add @autoform/joi
bun add @autoform/joi

In the docs, we use Zod as the schema example. Replace the schema provider import with the one for your schema library.

Create a form

"use client";

import * as z from "zod";
import { AutoForm } from "@autoform/mui/tanstack-form";
import { ZodProvider } from "@autoform/zod";

const mySchema = z.object({
  name: z.string(),
  age: z.coerce.number(),
  birthday: z.coerce.date(),
});

const schemaProvider = new ZodProvider(mySchema);

export default function MyForm() {
  return (
    <AutoForm
      schema={schemaProvider}
      onSubmit={(data, form) => {
        console.log(data); // Cleaned schema-parsed values
        console.log(form.state.values); // Original raw TanStack values
      }}
      withSubmit
    />
  );
}

Common imports you may need:

// similar for yup or joi
import { ZodProvider, fieldConfig } from "@autoform/zod";

// Shared component types.
import type {
  AutoFormFieldProps,
  FieldWrapperProps,
  ObjectWrapperProps,
  ArrayWrapperProps,
  ArrayElementWrapperProps,
} from "@autoform/react";

// For custom fields and form access.
import {
  useFieldContext,
  useFormContext,
} from "@autoform/react/tanstack-form";

Next.js and RSC

AutoForm can only be used inside a client-side React component due to schema serialization and client form state. In a Next.js app, mark the component that renders AutoForm with "use client".

Submitting the form

Use withSubmit to render AutoForm's default submit button:

<AutoForm schema={schemaProvider} onSubmit={handleSubmit} withSubmit />

You can also render your own submit button as a child:

<AutoForm schema={schemaProvider} onSubmit={handleSubmit}>
  <button type="submit">Save</button>
</AutoForm>

Accessing form data and methods

AutoForm exposes TanStack Form state and methods through:

  • onSubmit, where the second argument is the TanStack form API.
  • useFormContext, for components rendered inside AutoForm.
  • formControl, when a parent creates a form instance with useAppForm and passes it into AutoForm.

See form control for examples.

Custom field components

When creating custom field components for the TanStack adapter, use useFieldContext from @autoform/react/tanstack-form. See customization.

Next Steps

Custom Integration

This guide will walk you through the process of creating a custom UI integration for @autoform/react. By following these steps, you’ll be able to use AutoForm with your preferred UI library or custom components.

Form Control

Accessing TanStack Form data, states and methods.

On this page

Install the AutoForm Agent Skill (optional)Install AutoForm's form engineInstall AutoForm's integration to your UI libraryShadcn/uiMaterial UIMantineAnt DesignChakra UIInstall AutoForm's integration to your schema libraryZodYupJoiCreate a formNext.js and RSCSubmitting the formAccessing form data and methodsCustom field componentsNext Steps