Interface: AppFormHookResult<TComponents>

Defined in: packages/react-form/src/AppForm/createFormHookTypes.public.ts:214

App Form hooks and helpers bound to the components registered with createFormHook.

Type Parameters

TComponents

TComponents extends AnyReactFormComponentMap

Library-managed. Do not specify explicitly.

Properties

appFormOptions

appFormOptions: AppFormOptionsApi<TComponents>;

Defined in: packages/react-form/src/AppForm/createFormHookTypes.public.ts:241

Defines reusable form options that retain the components registered with createFormHook.

Use the result with ReactFormType when a child component needs the type of one known App Form, including its registered field and form components.

Example

tsx

const profileOptions = appFormOptions({
  defaultValues: { name: '' },
})

type ProfileForm = ReactFormType<typeof profileOptions>

function NameField({ form }: { form: ProfileForm }) {
  return (
    <form.Field name="name">
      {(field) => <field.TextField label="Name" />}
    </form.Field>
  )
}

defineAppFieldGroup

defineAppFieldGroup: DefineFieldGroupFn<TComponents["fieldComponents"]>;

Defined in: packages/react-form/src/AppForm/createFormHookTypes.public.ts:280

Defines a field group whose fields expose the field components registered with createFormHook.

Example

tsx

const { defineAppFieldGroup } = createFormHook({
  fieldComponents: {
    TextField,
  },
  formComponents: {},
})

const passwordFieldGroup = defineAppFieldGroup(({ strict }) => ({
  password: strict<string>(),
  confirmPassword: strict<string>(),
}))

interface PasswordFieldsProps {
  fields: typeof passwordFieldGroup.fields
}

function PasswordFields({ fields }: PasswordFieldsProps) {
  return (
    <>
      <fields.Field name="password">
        {(field) => <field.TextField label="Password" />}
      </fields.Field>
      <fields.Field name="confirmPassword">
        {(field) => (
          <field.TextField label="Confirm password" />
        )}
      </fields.Field>
    </>
  )
}

useAppForm

useAppForm: UseAppFormHook<TComponents>;

Defined in: packages/react-form/src/AppForm/createFormHookTypes.public.ts:305

Creates a React form API extended with the field and form components registered with createFormHook.

Form data, validators, and submission results are inferred from the passed options.

Example

tsx

function ProfileForm() {
  const form = useAppForm({
    defaultValues: { name: '' },
  })

  return (
    <form.AppForm>
      <form.Field name="name">
        {(field) => <field.TextField label="Name" />}
      </form.Field>
    </form.AppForm>
  )
}

useFormContext

useFormContext: () => ReactAppFormApi<any, any, TComponents>;

Defined in: packages/react-form/src/AppForm/createFormHookTypes.public.ts:329

Reads the current App Form API from the nearest form.AppForm provider.

Use this hook inside form components registered with createFormHook. It throws when called outside a form.AppForm subtree.

Returns

ReactAppFormApi<any, any, TComponents>

Example

tsx

function SubmitButton({ label }: { label: string }) {
  const form = useFormContext()

  return (
    <form.Subscribe selector={(state) => state.isSubmitting}>
      {(isSubmitting) => (
        <button type="submit" disabled={isSubmitting}>
          {label}
        </button>
      )}
    </form.Subscribe>
  )
}