Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProRender a complete, accessible form from a JSON Schema (or a zod schema through z.toJSONSchema): strings, numbers, booleans, enums, nested objects and arrays, with built-in validation and per-field overrides.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { z } from "zod"
import { AutoForm } from "@/components/ui/auto-form"const Signup = z.object({
name: z.string().min(2),
email: z.email(),
plan: z.enum(["free", "pro"]),
})
<AutoForm
schema={z.toJSONSchema(Signup)}
validator={Signup} // optional: use zod's messages and rules
fieldConfig={{ plan: { widget: "radio" } }}
onSubmit={async (values) => save(values)}
/>Without validator, the built-in checks cover required, minLength, maxLength, pattern, format (email, uri, date), minimum, maximum, multipleOf, enum, minItems and maxItems. Any other JSON Schema keyword is ignored by the checks, so pass validator when the schema uses them.
| Export | Description |
|---|---|
AutoForm | The generated form. |
validateJsonSchema(schema, value) | The built-in validation, returned as { path: messages }. |
defaultsFor, cleanValues, resolveSchema, humanize | Helpers you can reuse. |
| Prop | Type | Description |
|---|---|---|
schema | JsonSchema | Object schema. title, description, format, enum, default and x-order shape the form. |
fieldConfig | Record<path, AutoFormFieldConfig> | Per field label, description, placeholder, widget (input, textarea, password, select, radio, switch, checkbox), hidden, disabled, optionLabels. Paths have no indexes: phones.number. |
defaultValues | Record<string, unknown> | Merged over the defaults from the schema. |
validator | { safeParse } | Replaces the built-in checks. |
onSubmit | (values) => void | { fieldErrors } | Promise<...> | Called with cleaned values after validation passes. Return { fieldErrors: { "email": ["Taken."] } } to show server errors on fields; throw to show a form-level message. |
onValuesChange | (values) => void | Called with cleaned values after every edit, not on first render. |
readOnly | boolean | Read-only controls, no submit button. |
htmlFor; required fields add an aria-hidden asterisk and aria-required.aria-describedby; errors are role="alert". Errors appear after blur or a submit attempt, and a failed submit focuses the first invalid control.fieldset with a legend; radio groups too. Array rows are named groups with add, remove and Alt+Arrow reorder (see Field Array).The component ships with a Testing Library test (auto-form.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.