API Reference / @gtkx/forms / useForm

Function: useForm()

useForm<TFieldValues, TContext, TTransformedValues>(props?): UseFormReturn<TFieldValues, TContext, TTransformedValues>

Defined in: node_modules/.pnpm/react-hook-form@7.86.0_react@19.2.8/node_modules/react-hook-form/dist/useForm.d.ts:31

Custom hook to manage the entire form.

Type Parameters

TFieldValues

TFieldValues extends FieldValues = FieldValues

TContext

TContext = any

TTransformedValues

TTransformedValues = TFieldValues

Parameters

props?

Partial<{ context: TContext; criteriaMode: CriteriaMode; defaultValues: AsyncDefaultValues<TFieldValues> | DefaultValues<TFieldValues>; delayError: number; disabled: boolean; errors: FieldErrors<TFieldValues>; formControl?: Omit<UseFormReturn<TFieldValues, TContext, TTransformedValues>, "formState">; mode: "onBlur" | "onChange" | "onSubmit" | "onTouched" | "all"; progressive: boolean; resetOptions: Partial<{ keepDefaultValues: boolean; keepDirty: boolean; keepDirtyValues: boolean; keepErrors: boolean; keepFieldsRef: boolean; keepIsSubmitSuccessful: boolean; keepIsSubmitted: boolean; keepIsValid: boolean; keepIsValidating: boolean; keepSubmitCount: boolean; keepTouched: boolean; keepValues: boolean; }> | undefined; resolver: Resolver<TFieldValues, TContext, TTransformedValues>; reValidateMode: "onBlur" | "onChange" | "onSubmit"; shouldFocusError: boolean; shouldUnregister: boolean; shouldUseNativeValidation: boolean; validate: ValidateForm<TFieldValues>; values: TFieldValues; }>

form configuration and validation parameters.

Returns

UseFormReturn<TFieldValues, TContext, TTransformedValues>

methods - individual functions to manage the form state. UseFormReturn

Remarks

API • Demo • Video

Example

function App() {
  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example"));

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input defaultValue="test" {...register("example")} />
      <input {...register("exampleRequired", { required: true })} />
      {errors.exampleRequired && <span>This field is required</span>}
      <button>Submit</button>
    </form>
  );
}