AppForm

AppForm(props): ReactNode

Defined in: packages/react/src/forms/AppForm.tsx:68

Provides a TanStack Form instance to all descendant app form field components via formContext.

Wrap any set of forms/*Field.tsx components (rendered through form.AppField) in <AppForm> and they read the form from context — no prop threading needed.

The <form> is noValidate: this app’s own Zod schemas are the single source of truth for validation messages, rendered through FormFieldLayout. Any field that also sets a native HTML constraint attribute (e.g. checkbox’s required, kept for its ARIA/semantic value) would otherwise trigger the browser’s own constraint-validation UI on submit — which blocks the submit event entirely before this app’s onSubmit validator ever runs, so the custom message never renders.

Parameters

props

Component props.

children

ReactNode

Field components and any other form content (submit button, etc.).

className?

string

Optional CSS class applied to the <form> element.

form

AnyFormApi

The TanStack Form instance created by useForm (or useAppForm). Provided to all descendant field components via formContext.

Returns

ReactNode

A <form> element wrapped in formContext.Provider, distributing the form instance to all descendant field components.

Example

const form = useAppForm({ defaultValues: { title: "", slug: "" } })

<AppForm form={form}>
  <form.AppField name="title">{(field) => <field.TextField label="Title" />}</form.AppField>
  <form.AppField name="slug">{(field) => <field.TextField label="Slug" />}</form.AppField>
</AppForm>