AutoForm

What is AutoForm? Let's say you have a zod or yup schema that you already use for your backend:

import { z } from "zod";
import { ZodProvider } from "@autoform/zod";

const userSchema = z.object({
  name: z.string(),
  birthday: z.coerce.date(),
  email: z.string().email(),
});

export const schemaProvider = new ZodProvider(userSchema);

With AutoForm, you can automatically render a form for this schema:

import { AutoForm } from "@autoform/mui/react-hook-form";
import { schemaProvider } from "./schema";

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

AutoForm itself is agnostic to the schema, rendering and UI library you use. It also comes with official packages for popular UI libraries like Material UI, shadcn/ui, Mantine, Ant Design, Chakra and validation libraries like Zod, Yup, Joi.

This code produces a form that looks like this (try it out!):

When to use AutoForm?

AutoForm is a drop-in form builder for your internal tools and simple forms with existing schemas. For example, if you already have schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you're done.

AutoForm doesn't change how you write custom inputs or access data, state, and methods. You still use your form library the way you usually would. AutoForm maps schema fields to the right input components, connects them to the form library, and sets up validation.

As forms almost always grow more complex, AutoForm gives you options to customize how forms are rendered (e.g. using the fieldConfig option) and escape hatches to customize even further.

However, AutoForm does not aim to be a full-featured form builder or support every edge case in your schema. If you need more customization, feel free to customize AutoForm's renderer in your project. For an example on how AutoForm can be extended for more powerful, YAML-based, multi-page forms, see AutoForm YAML.

Pick your form library

Learn how to build forms with AutoForm and the form library of your choice.

• React Hook Form guide
• TanStack Form guide