AutoFormGetting Started
Render AutoForm with the React Hook Form adapter.
New to AutoForm? Check out the introduction first.
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 autoformpnpm dlx skills add https://github.com/vantezzen/autoform/tree/main/skills --skill autoformyarn skills add https://github.com/vantezzen/autoform/tree/main/skills --skill autoformbunx --bun skills add https://github.com/vantezzen/autoform/tree/main/skills --skill autoformInstall AutoForm's form engine
Install React Hook Form, the resolver package, and the AutoForm React base package:
npm install @autoform/react react-hook-form @hookform/resolverspnpm add @autoform/react react-hook-form @hookform/resolversyarn add @autoform/react react-hook-form @hookform/resolversbun add @autoform/react react-hook-form @hookform/resolversInstall 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-rhf.jsonpnpm dlx shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform-rhf.jsonyarn shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform-rhf.jsonbunx --bun shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform-rhf.jsonUse the generated React Hook Form adapter export:
import { AutoForm } from "@/components/ui/autoform/react-hook-form";Material UI
{
"@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@^11pnpm add @mui/material@^6 @mui/icons-material@^6 @emotion/react@^11 @emotion/styled@^11yarn add @mui/material@^6 @mui/icons-material@^6 @emotion/react@^11 @emotion/styled@^11bun add @mui/material@^6 @mui/icons-material@^6 @emotion/react@^11 @emotion/styled@^11npm install @autoform/muipnpm add @autoform/muiyarn add @autoform/muibun add @autoform/muiimport { AutoForm } from "@autoform/mui/react-hook-form";Mantine
{
"@mantine/core": "^7",
"@mantine/dates": "^7"
}npm install @mantine/core@^7 @mantine/dates@^7pnpm add @mantine/core@^7 @mantine/dates@^7yarn add @mantine/core@^7 @mantine/dates@^7bun add @mantine/core@^7 @mantine/dates@^7npm install @autoform/mantinepnpm add @autoform/mantineyarn add @autoform/mantinebun add @autoform/mantineimport { AutoForm } from "@autoform/mantine/react-hook-form";Ant Design
{
"antd": "^5"
}npm install antd@^5pnpm add antd@^5yarn add antd@^5bun add antd@^5npm install @autoform/antpnpm add @autoform/antyarn add @autoform/antbun add @autoform/antimport { AutoForm } from "@autoform/ant/react-hook-form";Chakra UI
{
"@chakra-ui/react": "^3.8",
"@emotion/react": "^11.14"
}npm install @chakra-ui/react@^3.8 @emotion/react@^11.14pnpm add @chakra-ui/react@^3.8 @emotion/react@^11.14yarn add @chakra-ui/react@^3.8 @emotion/react@^11.14bun add @chakra-ui/react@^3.8 @emotion/react@^11.14npm install @autoform/chakrapnpm add @autoform/chakrayarn add @autoform/chakrabun add @autoform/chakraimport { AutoForm } from "@autoform/chakra/react-hook-form";If you want to integrate into another UI library and create a custom package, check out the custom integration guide.
In the docs, we will use mui 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/zodpnpm add @autoform/zodyarn add @autoform/zodbun add @autoform/zodYup
npm install @autoform/yuppnpm add @autoform/yupyarn add @autoform/yupbun add @autoform/yupJoi
npm install @autoform/joipnpm add @autoform/joiyarn add @autoform/joibun add @autoform/joiIn 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 * as z from "zod";
import { AutoForm } from "@autoform/mui/react-hook-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);
function MyForm() {
return (
<AutoForm
schema={schemaProvider}
onSubmit={(data, form) => {
console.log(data);
}}
withSubmit
/>
);
}
export default MyForm;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.
import { useController } from "react-hook-form";Next.js and RSC
AutoForm can only be used inside a client-side React component due to serialization of the schema. If you want to use it in a Next.js app, 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/react-hook-form";
export default function MyForm() {
return <AutoForm ... />;
}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>Accessing the form data and methods
AutoForm gives you several ways to access the form state and methods — via onSubmit, useFormContext, or an external formControl. See more.
Custom field components
When creating custom field components, you can use useController() from react-hook-form to register the field and access the field's methods and state. To learn more about creating custom fields, see customization.