AutoFormAutoForm

Instant forms from your existing schemas.

AutoForm turns validation schemas into working forms with labels, defaults, field types, and validation wired in.

Quick startBrowse docs

What AutoForm handles

Keep the schema as the source of truth. Customize when the form needs it.

Start building

Validation

Realtime validation from the schema

Use your form library normally. AutoForm connects the rendered fields to schema validation and the form state you configure.

View docs
schema.ts
const realtimeSchema = z.object({
  email: z.email("Enter a valid email"),
  password: z.string().min(8, "Use at least 8 characters"),
});

const schemaProvider = new ZodProvider(realtimeSchema);

const { formControl } = createFormControl({
  mode: "all",
});

Customization

Swap in richer fields when defaults are not enough

Map schema fields to custom inputs such as steppers, date pickers, sliders, color pickers, and richer selection controls.

View docs
Banana#6366f1
50
Submitted value
null
schema.ts
const schema = z.object({
  quantity: z.number()
    .min(1)
    .max(99)
    .default(1)
    .check(fieldConfig({ fieldType: "numberStepper" })),

  themeColor: z.string()
    .regex(/^#[0-9a-fA-F]{6}$/)
    .default("#6366f1")
    .check(fieldConfig({ fieldType: "colorPicker" })),

  plan: z.enum(["starter", "pro", "enterprise"])
    .default("starter")
    .check(fieldConfig({ fieldType: "radioCard" })),
});

<AutoForm
  schema={new ZodProvider(schema)}
  formComponents={{
    numberStepper: NumberStepperField,
    colorPicker: ColorPickerField,
    radioCard: RadioCardField,
  }}
/>

Composition

Compose generated forms inside custom workflows

AutoForm can sit inside dialogs and nested flows, so simple schema-driven forms can grow without replacing your app structure.

View docs
Submitted value
null
schema.ts
const colorsSchema = z.object({
  colors: z.array(z.string().min(1)).min(1),
});

const profileSchema = z.object({
  username: z.string().min(2),
  colors: z.array(z.string())
    .min(1)
    .default([])
    .describe("Favorite colors")
    .check(fieldConfig({ fieldType: "colorDialog" })),
});

<AutoForm
  schema={new ZodProvider(profileSchema)}
  formComponents={{ colorDialog: ColorDialogField }}
/>

Build your first schema-driven form.

Start with the React quick start, then customize only the fields that need more than the defaults.

Open quick startView on GitHub