API

For complete source definitions, see packages/react/src/types.ts.

AutoFormProps

UI integrations such as @acp-autoform/mui, @acp-autoform/ant, etc. provide default uiComponents and formComponents, while still allowing you to override them. They provide AutoForm with ExtendableAutoFormProps type, which is the same as AutoFormProps, except uiComponents and formComponents props are optional.

schema

schema must be a schema provider instance from one of the schema packages.

import { ZodProvider } from "@acp-autoform/zod";
import * as z from "zod";

const schema = z.object({
  username: z.string(),
});

<AutoForm schema={new ZodProvider(schema)} withSubmit />;

defaultValues vs values

Use defaultValues for initial form state. Use values only when the form should react to external state changes.

<AutoForm schema={schemaProvider} defaultValues={{ username: "johndoe" }} />

const [user, setUser] = useState({ username: "johndoe" });

<AutoForm schema={schemaProvider} values={user} />;

formControl

Use formControl when a parent component needs direct access to react-hook-form methods. Create it once per form instance so the form state and subscriptions are stable across renders. You can pass all props of useForm of react-hook-form, to createFormControl.

import * as React from "react";
import { createFormControl } from "react-hook-form";

function MyForm() {
  const { formControl, reset } = React.useMemo(() => createFormControl(), []);

  return (
    <>
      <AutoForm schema={schemaProvider} formControl={formControl} />
      <button onClick={() => reset()}>Reset</button>
    </>
  );
}

formComponents

formComponents maps AutoForm field types to React components. It is the right extension point for custom inputs.

<AutoForm
  schema={schemaProvider}
  formComponents={{
    markdown: MarkdownEditor,
    colorPicker: ColorPickerInput,
  }}
/>

uiComponents

uiComponents replaces structural pieces such as wrappers, error messages, and the submit button. It is the right extension point for layout and design-system integration.

<AutoForm
  schema={schemaProvider}
  uiComponents={{
    FieldWrapper: CustomFieldWrapper,
    ErrorMessage: ({ error }) => <span className="text-red-500">{error}</span>,
  }}
/>

Custom fields

Custom field components receive AutoFormFieldProps which contain useful data about that field. import useController from react-hook-form and spread the returned field props into your input. Pass the id from the props as the name option.

import { useController } from "react-hook-form";
import { AutoFormFieldProps } from "@acp-autoform/react";

export function StringField({ id, inputProps }: AutoFormFieldProps) {
  const { field } = useController({ name: id });

  return <input id={id} {...inputProps} {...field} value={field.value ?? ""} />;
}

UI components

These components are used by the base renderer to assemble the form. Override them when you want to change layout, labels, error placement, object sections, array controls, or submit behavior.