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 "@acp-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 "@acp-autoform/mui";
import { schemaProvider } from "./schema";

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

AutoForm itself is agnostic to the schema library, rendering library and UI library you use, but it comes with a set of official packages that make it easy to use with popular UI libraries like Material UI, Shadcn ui, Mantine, Ant, Chakra and integrate with validation libraries like Zod, Yup, Joi etc.

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

When to use AutoForm?

AutoForm is mostly meant as a drop-in form builder for your internal and low-priority 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.

Instead of manually binding each component to the form, handling field registration, and verifying every connection is set up correctly, AutoForm handles that mapping for you. It looks at your schema and automatically stitches each pre-built component into the right place, so you're not writing the binding boilerplate and setup for every field.

AutoForm works best when:

• Your input components are already created
• Your validation schema is ready
• You want to skip the repetitive work of connecting each component to the form correctly

Build your components and schema, AutoForm brings them together.

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

However, AutoForm does not aim to be a full-featured form builder and 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.

shadcn/ui component

AutoForm evolved from a shadcn/ui component into a standalone library with broader UI and schema support.