AutoForm
React

Getting Started

New to AutoForm? Check out the introduction first.

Migrating from the old shadcn/ui component? Check out the migration guide.

Install AutoForm's integration to your UI library

AutoForm integrates directly into your UI library to render forms. You can choose from the following official integrations:

Before installing an @autoform UI package

  • Install react-hook-form@^7
  • Install required peer dependencies.

Material UI

peer dependencies
{
  "@mui/material": "^6",
  "@emotion/react": "^11",
  "@emotion/styled": "^11"
}
npm install @mui/material@^6 @emotion/react@^11 @emotion/styled@^11
pnpm add @mui/material@^6 @emotion/react@^11 @emotion/styled@^11
yarn add @mui/material@^6 @emotion/react@^11 @emotion/styled@^11
bun add @mui/material@^6 @emotion/react@^11 @emotion/styled@^11
npm install @autoform/mui
pnpm add @autoform/mui
yarn add @autoform/mui
bun add @autoform/mui

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

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

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

Shadcn/ui

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

Use import { AutoForm } from "@/components/ui/autoform" to import the component. By default, the registry will use the zod integration. If you want to use another schema library, simply update the /components/ui/autoform/utils.ts file.

  • more to come...

If you want to integrate into your own UI components or another UI library, check out the custom integration guide.

In the docs, we will use Material UI as an example but simply replace the imports with the ones from your UI library.

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

If you are using Zod < 3.25.0 (i.e. the one before the split into /v3 and /v4), please install @autoform/zod@^4.0.0 instead:

npm install @autoform/zod@^4.0.0
pnpm add @autoform/zod@^4.0.0
yarn add @autoform/zod@^4.0.0
bun add @autoform/zod@^4.0.0

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

more to come...

In the docs, we will use Zod as an example but simply replace the imports with the ones from your schema library.

Create a form

import { AutoForm } from "@autoform/mui";
import { ZodProvider } from "@autoform/zod";

const mySchema = z.object({
  // ...
});
const schemaProvider = new ZodProvider(mySchema);

function MyForm() {
  return (
    <AutoForm
      schema={schemaProvider}
      onSubmit={(data, form) => {
        console.log(data);
      }}
      withSubmit
    />
  );
}

Next.js and RSC

AutoForm can only be used inside a client-side React component due to serialization of the schema and values to your event listeners. If you want to use it in a Next.js app, simply mark your component with "use client":

// MyPage.tsx
export default function MyPage() {
  return (
    <div>
      <MyForm />
    </div>
  );
}

// MyForm.tsx
"use client";
import { AutoForm } from "@autoform/mui";
export default function MyForm() {
  return <AutoForm ... />;
}

Accessing the form data

The form data is managed by react-hook-form. There are two ways to access the form data:

onSubmit

The preferred way is to use the onSubmit prop. This will be called when the form is submitted and the data is valid.

<AutoForm
  onSubmit={(data, form) => {
    // Do something with the data
    // Data is validated and coerced with zod automatically
    // You can use the "form" prop to access the underlying "react-hook-form" instance
    // for further information and control over the form
  }}
/>

Using onFormInit and values

If you need more control over the form, you can use the onFormInit and values props to get access to the react-hook-form instance and control data directly:

const [values, setValues] = useState({});

<AutoForm
  onFormInit={(form) => {
    // You can use the "form" prop to access the underlying "react-hook-form" instance
    // https://www.react-hook-form.com/api/useform/
    form.watch((data) => {
      setValues(data);
    });

    // You can freely save the form instance to a state or context and use it later to access the form state
    form.formState.isDirty; // => true
  }}
  values={values}
/>;

This allows you to access form methods and state from the parent component. You can use the onFormInit prop independent of controlled forms to access the form instance.

Passing props to the form element

You can pass additional props to the underlying form element using the formProps prop:

<AutoForm
  schema={schemaProvider}
  onSubmit={handleSubmit}
  formProps={{
    className: "my-custom-form-class",
    onKeyDown: (e) => {
      if (e.key === "Enter") e.preventDefault();
    },
  }}
/>

This allows you to customize the form element's attributes and behavior as needed.

Submitting the form

You can use the withSubmit prop to automatically add a submit button to the form.

<AutoForm
  // ...
  withSubmit
/>

Adding other elements

All children passed to the AutoForm component will be rendered below the form.

<AutoForm>
  <p className="text-gray-500 text-sm">
    By submitting this form, you agree to our{" "}
    <a href="#" className="text-primary underline">
      terms and conditions
    </a>
    .
  </p>
</AutoForm>

Next Steps

AutoForm

Automatically render forms for your existing data schema.

Customization

The customization of the components is done by providing a `fieldConfig` to your schema fields. This allows you to customize the rendering of the field, add additional props, and more.