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
{
"@mui/material": "^6",
"@emotion/react": "^11",
"@emotion/styled": "^11"
}npm install @mui/material@^6 @emotion/react@^11 @emotion/styled@^11pnpm add @mui/material@^6 @emotion/react@^11 @emotion/styled@^11yarn add @mui/material@^6 @emotion/react@^11 @emotion/styled@^11bun add @mui/material@^6 @emotion/react@^11 @emotion/styled@^11npm install @autoform/muipnpm add @autoform/muiyarn add @autoform/muibun add @autoform/muiMantine
{
"@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/mantineAnt 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/antChakra 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/chakraShadcn/ui
npx shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform.jsonpnpm dlx shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform.jsonyarn shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform.jsonbunx --bun shadcn@latest add https://raw.githubusercontent.com/vantezzen/autoform/refs/heads/main/packages/shadcn/registry/autoform.jsonUse 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/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/joimore 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>