AutoForm

A form automatically created based simply on a zod schema. Perfect for simple forms that don't need custom UI. Also perfect for testing endpoints rapidly in a Typesafe manner.

Demos

Create or Update (new feature ✨)

<AutoForm /> automatically detects when an object is provided, allowing it to be used for both creating and updating data. This means you can seamlessly create a new object or update an existing one using the same AutoForm component. Here is an example with a simple user:

{
  "username": "Maxime",
  "email": "awesome@email.com"
}

Basics

This is an example of what you can do with <AutoForm />.

Array Example

You can use arrays in your schemas to create dynamic forms.

{}

Array Primitives

<AutoForm /> also provides additional support for Array primitives (tags and multi-select).

{}

Confirm Password

Dependencies

Sub Object

Input Without Label

API

Controlled

About

The original idea of the <AutoForm /> component comes from the auto-form by vantezzen.

Credit to vozmarkov for the implementation of Array Primitives.

We've added some features (mode, resetOnSubmit, noValidate, etc.) and simplified the code. Enjoy!

Installation

npx ever-ui-clx@0.2.1 add demo-auto-form

Usage

import { z } from "zod";
import { Button } from "@/components/ui/button";
import { AutoForm } from "@/registry/default/ui/auto-form";

const SCHEMA_DEMO = z.object({
  string: z.string().min(4, {
    message: "String must be at least 4 characters.",
  }),
  number: z.coerce.number().refine((val) => val >= 42, {
    message: "Number must be at least 42 !.",
  }),
});
type TSchema_Demo = z.infer<typeof SCHEMA_DEMO>;

<AutoForm
  formSchema={SCHEMA_DEMO}
  onSubmit={(data) => handleSubmit(data)}
  mode="onBlur" // optionnal
  // resetOnSubmit={false}
>
  <Button type="submit">Submit</Button>
</AutoForm>