useFormDynamic

useFormDynamic manages form state: field values, touch state, form-level error, and submit status. It also acts as a factory for field props that you pass into Form components (FormField, FormFieldSelect, etc.).

Parameters

Field types: "text" | "textarea" | "select" | "checkbox"

Example:

const formRef = useRef<HTMLFormElement>(null);
const formData = useFormDynamic(
  {
    name: "text",
    email: "text",
    country: "select",
    acceptTerms: "checkbox",
  },
  formRef
);

Return value

The hook returns the following.

Form state (from internal field state)

Field factory and bulk getters

Form actions

FieldProps

field(name) and getFields() return objects that implement this shape. Pass them as the field prop to Form components.

Note: Composed components (e.g. FormFieldSelect, FormFieldCombobox, FormFieldEditor) don’t use native inputs; they call field.setValue(value) when the user changes the value. The hook’s FieldProps.value is typed as string | boolean, but some of these components use arrays (e.g. multi select, sortable list) and cast as needed.

Initial value resolution

Values are initialized from the field type:

setValue and DOM sync

When you pass formGeneralRef to useFormDynamic, each field’s setValue does two things:

1. Updates the hook’s state (so getValues() and field.value reflect the new value).
2. If the form ref is set and there is an element with [name="<fieldName>"] (input, textarea, or select), it updates that element’s value or checked state so the DOM stays in sync.

If you don’t pass formGeneralRef, or the form doesn’t contain a matching native control, setValue only updates state. That’s the normal case when using composed components (Select, Combobox, Editor, etc.), which are controlled via field.value and field.setValue and don’t rely on a hidden native input with the same name.