react-hook-form

react-hook-form

Version 7.91.0
Published 2 days ago
1.64 MB
No dependencies
MIT license

Install

npm i react-hook-form

yarn add react-hook-form

pnpm add react-hook-form

Overview

Performant, flexible and extensible forms library for React Hooks

Index

Functions

function appendErrors

appendErrors: (
    name: InternalFieldName,
    validateAllFieldCriteria: boolean,
    errors: InternalFieldErrors,
    type: string,
    message: ValidateResult
) => {};

function Controller

Controller: <
    TFieldValues extends FieldValues = FieldValues,
    TName extends Path<TFieldValues> = Path<TFieldValues>,
    TTransformedValues = TFieldValues
>(
    props: ControllerProps<TFieldValues, TName, TTransformedValues>
) => any;

Component wrapper around useController for controlled inputs.
Example 1
<Controller control={control} name="test" render={({ field, fieldState, formState }) => <input {...field} />} />
See Also
- [API](https://react-hook-form.com/docs/usecontroller/controller)

function createFormControl

createFormControl: <
    TFieldValues extends FieldValues = FieldValues,
    TContext = any,
    TTransformedValues = TFieldValues
>(
    props?: UseFormProps<TFieldValues, TContext, TTransformedValues>
) => Omit<UseFormReturn<TFieldValues, TContext, TTransformedValues>, 'formState'> & {
    formControl: Omit<
        UseFormReturn<TFieldValues, TContext, TTransformedValues>,
        'formState'
    >;
};

function ErrorMessage

ErrorMessage: <TFieldValues extends FieldValues = FieldValues>({
    as,
    control,
    name,
    render,
}: ErrorMessageProps<TFieldValues>) => React.ReactElement<
    any,
    string | React.JSXElementConstructor<any>
> | null;

Displays the validation error for a single field. Reads from control when provided, otherwise from the nearest FormProvider.

Example 1

<ErrorMessage control={control} name="email" as="p" />
<ErrorMessage name="email" as="span" />
<ErrorMessage control={control} name="email"
  render={({ message }) => <Alert>{message}</Alert>} />

function FieldArray

FieldArray: <
    TFieldValues extends FieldValues = FieldValues,
    TName extends ArrayPath<TFieldValues> = ArrayPath<TFieldValues>,
    TKeyName extends string = 'id'
>(
    props: FieldArrayProps<TFieldValues, TName, TKeyName>
) => any;

Component based on useFieldArray hook to work with controlled component.

Example 1

function App() {
  const { control, register } = useForm<FormValues>({
    defaultValues: {
      test: [
        {
          value: '',
        },
      ],
    },
  });

  return (
    <form>
      <FieldArray
        control={control}
        name="test"
        render={({ fields }) =>
          fields.map((field, index) => (
            <input key={field.id} {...register(`test.${index}.value`)} />
          ))
        }
      />
    </form>
  );
}

function Form

Form: <TFieldValues extends FieldValues, TTransformedValues = TFieldValues>(
    props: FormProps<TFieldValues, TTransformedValues>
) => React.ReactNode;

Form component that handles submission, including optional action fetch and server error wiring.

Example 1

<Form action="/api" control={control}>
  <input {...register("name")} />
  <p>{errors?.root?.server && 'Server error'}</p>
  <button>Submit</button>
</Form>

function FormProvider

FormProvider: <
    TFieldValues extends FieldValues,
    TContext = any,
    TTransformedValues = TFieldValues
>({
    children,
    watch,
    getValues,
    getErrors,
    getFieldState,
    setError,
    clearErrors,
    setValue,
    setValues,
    trigger,
    formState,
    resetField,
    reset,
    resetDefaultValues,
    handleSubmit,
    unregister,
    control,
    register,
    setFocus,
    subscribe,
}: FormProviderProps<
    TFieldValues,
    TContext,
    TTransformedValues
>) => React.JSX.Element;

Provides all useForm methods to the component tree via React Context. Pair with useFormContext to consume them in any descendant.
Example 1
<FormProvider {...methods}> <form onSubmit={methods.handleSubmit(onSubmit)}>{children}</form> </FormProvider>
See Also
- [API](https://react-hook-form.com/docs/useformcontext)

function FormState

FormState: <
    TFieldValues extends FieldValues,
    TTransformedValues = TFieldValues
>({
    control,
    disabled,
    exact,
    name,
    render,
}: FormStateProps<TFieldValues, TTransformedValues>) => ReactNode;

function FormStateSubscribe

FormStateSubscribe: <
    TFieldValues extends FieldValues,
    TTransformedValues = TFieldValues
>({
    control,
    disabled,
    exact,
    name,
    render,
}: FormStateProps<TFieldValues, TTransformedValues>) => ReactNode;

Deprecated
Use FormState instead. Kept as an alias for backward compatibility.

function get

get: <T, TResult = unknown>(
    object: T,
    path?: string | null,
    defaultValue?: unknown
) => TResult;

function set

set: (
    object: FieldValues,
    path: FieldPath<FieldValues>,
    value?: unknown
) => void;

function useController

useController: <
    TFieldValues extends FieldValues = FieldValues,
    TName extends Path<TFieldValues> = Path<TFieldValues>,
    TTransformedValues = TFieldValues
>(
    props: UseControllerProps<TFieldValues, TName, TTransformedValues>
) => UseControllerReturn<TFieldValues, TName>;

Hook for controlled inputs. Returns field, fieldState, and formState. Re-renders are isolated to the hook level.
Example 1
const { field, fieldState } = useController({ control, name: "email" }); return <input {...field} />;
See Also
- [API](https://react-hook-form.com/docs/usecontroller)

function useFieldArray

useFieldArray: <
    TFieldValues extends FieldValues = FieldValues,
    TFieldArrayName extends ArrayPath<TFieldValues> = ArrayPath<TFieldValues>,
    TKeyName extends string = 'id',
    TTransformedValues = TFieldValues
>(
    props: UseFieldArrayProps<
        TFieldValues,
        TFieldArrayName,
        TKeyName,
        TTransformedValues
    >
) => UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>;

Hook for dynamic field arrays. Provides fields and mutation methods: append, prepend, remove, insert, swap, move, update, replace.
Example 1
const { fields, append } = useFieldArray({ control, name: "items" }); return fields.map((f, i) => <input key={f.id} {...register(`items.${i}.name`)} />);
See Also
- [API](https://react-hook-form.com/docs/usefieldarray)

function useForm

useForm: <
    TFieldValues extends FieldValues = FieldValues,
    TContext = any,
    TTransformedValues = TFieldValues
>(
    props?: UseFormProps<TFieldValues, TContext, TTransformedValues>
) => UseFormReturn<TFieldValues, TContext, TTransformedValues>;

Core hook for managing a form. Returns all methods and state for registration, validation, and submission.

Example 1

const { register, handleSubmit, formState: { errors } } = useForm<FormValues>();
<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("email", { required: true })} />
</form>

function useFormContext

useFormContext: <
    TFieldValues extends FieldValues,
    TContext = any,
    TTransformedValues = TFieldValues
>() => UseFormReturn<TFieldValues, TContext, TTransformedValues>;

Retrieves all useForm methods from the nearest FormProvider. Use in deeply nested components to avoid prop-drilling.
Example 1
const { register } = useFormContext<FormValues>();
See Also
- [API](https://react-hook-form.com/docs/useformcontext)

function useFormState

useFormState: <
    TFieldValues extends FieldValues = FieldValues,
    TTransformedValues = TFieldValues
>(
    props?: UseFormStateProps<TFieldValues, TTransformedValues>
) => UseFormStateReturn<TFieldValues>;

Subscribes to form state with re-renders isolated to this hook. Optionally scope to specific field names to minimize re-render surface.
Example 1
const { errors, isDirty } = useFormState({ control, name: "email" });
See Also
- [API](https://react-hook-form.com/docs/useformstate)

function useWatch

useWatch: {
    <
        TFieldValues extends FieldValues = FieldValues,
        TTransformedValues = TFieldValues
    >(props: {
        name?: undefined;
        defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
        control?: Control<TFieldValues, any, TTransformedValues>;
        disabled?: boolean;
        exact?: boolean;
        compute?: undefined;
    }): DeepPartialSkipArrayKey<TFieldValues>;
    <
        TFieldValues extends FieldValues = FieldValues,
        TFieldName extends Path<TFieldValues> = Path<TFieldValues>,
        TTransformedValues = TFieldValues
    >(props: {
        name: TFieldName;
        defaultValue?: PathValueImpl<TFieldValues, TFieldName>;
        control?: Control<TFieldValues, any, TTransformedValues>;
        disabled?: boolean;
        exact?: boolean;
        compute?: undefined;
    }): PathValueImpl<TFieldValues, TFieldName>;
    <
        TFieldValues extends FieldValues = FieldValues,
        TTransformedValues = TFieldValues,
        TComputeValue = unknown
    >(props: {
        name?: undefined;
        defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
        control?: Control<TFieldValues, any, TTransformedValues>;
        disabled?: boolean;
        exact?: boolean;
        compute: (formValues: TFieldValues) => TComputeValue;
    }): TComputeValue;
    <
        TFieldValues extends FieldValues = FieldValues,
        TFieldName extends Path<TFieldValues> = Path<TFieldValues>,
        TTransformedValues = TFieldValues,
        TComputeValue = unknown
    >(props: {
        name: TFieldName;
        defaultValue?: PathValueImpl<TFieldValues, TFieldName>;
        control?: Control<TFieldValues, any, TTransformedValues>;
        disabled?: boolean;
        exact?: boolean;
        compute: (
            fieldValue: PathValueImpl<TFieldValues, TFieldName>
        ) => TComputeValue;
    }): TComputeValue;
    <
        TFieldValues extends FieldValues = FieldValues,
        TFieldNames extends readonly Path<TFieldValues>[] = readonly Path<TFieldValues>[],
        TTransformedValues = TFieldValues
    >(props: {
        name: readonly [...TFieldNames];
        defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
        control?: Control<TFieldValues, any, TTransformedValues>;
        disabled?: boolean;
        exact?: boolean;
        compute?: undefined;
    }): {
        [K in keyof TFieldNames]: PathValueImpl<
            TFieldValues,
            TFieldNames[K] & Path<TFieldValues>
        >;
    };
    <
        TFieldValues extends FieldValues = FieldValues,
        TFieldNames extends readonly Path<TFieldValues>[] = readonly Path<TFieldValues>[],
        TTransformedValues = TFieldValues,
        TComputeValue = unknown
    >(props: {
        name: readonly [...TFieldNames];
        defaultValue?: DeepPartialSkipArrayKey<TFieldValues>;
        control?: Control<TFieldValues, any, TTransformedValues>;
        disabled?: boolean;
        exact?: boolean;
        compute: (fieldValue: {
            [K in keyof TFieldNames]: PathValueImpl<
                TFieldValues,
                TFieldNames[K] & Path<TFieldValues>
            >;
        }) => TComputeValue;
    }): TComputeValue;
    <
        TFieldValues extends FieldValues = FieldValues
    >(): DeepPartialSkipArrayKey<TFieldValues>;
};

Watches the entire form; re-renders when any value changes.
Watches a single field by name.
Watches the entire form and derives a value via compute.
Watches a single field and derives a value via compute.
Watches multiple fields by name array.
Watches multiple fields and derives a value via compute.
Watches the entire form; reads control from FormProvider context.

function Watch

Watch: <
    TFieldValues extends FieldValues = FieldValues,
    TFieldName extends
        | Path<TFieldValues>
        | readonly [Path<TFieldValues>, ...Path<TFieldValues>[]]
        | Path<TFieldValues>[]
        | readonly Path<TFieldValues>[] = undefined,
    TContext = any,
    TTransformedValues = TFieldValues,
    TComputeValue = undefined
>(
    props: WatchProps<
        TFieldName,
        TFieldValues,
        TContext,
        TTransformedValues,
        TComputeValue
    >
) => import('react').ReactNode | import('react').ReactNode[];

Component wrapper around useWatch. Re-renders only when watched fields change.
Example 1
<Watch control={control} names={["foo", "bar"]} render={([foo, bar]) => <span>{foo} {bar}</span>} />
See Also
- [API](https://react-hook-form.com/docs/usewatch)

Interfaces

interface OpaqueTypes

interface OpaqueTypes {}

Registry of types which the recursive type helpers (Path, DeepPartial, FieldErrors, ...) treat as opaque leaf values instead of recursing into their properties.
Empty by default, so it has no effect until a consumer registers a type via declaration merging. Useful for rich third-party value types (Dayjs, Decimal, Luxon DateTime, ...) whose members should never be addressed by a form path and can be expensive for the compiler to traverse.
Example 1
declare module 'react-hook-form' { interface OpaqueTypes { dayjs: Dayjs; } }

interface ResolverOptions

interface ResolverOptions<TFieldValues extends FieldValues> {}

property criteriaMode

criteriaMode?: CriteriaMode;

property fields

fields: Record<InternalFieldName, Field['_f']>;

property names

names?: FieldName<TFieldValues>[];

property shouldUseNativeValidation

shouldUseNativeValidation: boolean | undefined;

Type Aliases

type ArrayPath

type ArrayPath<T> = T extends unknown ? ArrayPathInternal<T> : never;

Type which eagerly collects all paths through a type which point to an array type.
Example 1
Path<{foo: {bar: string[], baz: number[]}}> = 'foo.bar' | 'foo.baz'

type BatchFieldArrayUpdate

type BatchFieldArrayUpdate = <
    T extends Function,
    TFieldValues extends FieldValues,
    TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>
>(
    name: InternalFieldName,
    updatedFieldArrayValues?: Partial<FieldArray<TFieldValues, TFieldArrayName>>[],
    method?: T,
    args?: Partial<{
        argA: unknown;
        argB: unknown;
    }>,
    shouldSetValue?: boolean,
    shouldUpdateFieldsAndErrors?: boolean
) => void;

type BrowserNativeObject

type BrowserNativeObject = Date | FileList | File;

type ChangeHandler

type ChangeHandler = (event: { target: any; type?: any }) => Promise<void | boolean>;

type Control

type Control<
    TFieldValues extends FieldValues = FieldValues,
    TContext = any,
    TTransformedValues = TFieldValues
> = {
    _subjects: Subjects<TFieldValues>;
    _removeUnmounted: Noop;
    _names: Names;
    _state: {
        mount: boolean;
        action: boolean;
        actionArrayLengths: Map<InternalFieldName, number>;
        watch: boolean;
    };
    _reset: UseFormReset<TFieldValues>;
    _options: UseFormProps<TFieldValues, TContext, TTransformedValues>;
    _getDirty: GetIsDirty;
    _resetDefaultValues: Noop;
    _formState: FormState<TFieldValues>;
    _setValid: (shouldUpdateValid?: boolean) => void;
    _fields: FieldRefs;
    _formValues: FieldValues;
    _proxyFormState: ReadFormState;
    _defaultValues: Partial<DefaultValues<TFieldValues>>;
    _getWatch: WatchInternal<TFieldValues>;
    _setFieldArray: BatchFieldArrayUpdate;
    _getFieldArray: <TFieldArrayValues>(
        name: InternalFieldName
    ) => Partial<TFieldArrayValues>[];
    _setErrors: (errors: FieldErrors<TFieldValues>) => void;
    _setDisabledField: (props: {
        disabled?: boolean;
        name: InternalFieldName;
    }) => void;
    _runSchema: (names: InternalFieldName[]) => Promise<{
        errors: FieldErrors;
    }>;
    _updateIsValidating: (
        names?: InternalFieldName[],
        isValidating?: boolean
    ) => void;
    _focusError: () => boolean | undefined;
    _disableForm: (disabled?: boolean) => void;
    _subscribe: FromSubscribe<TFieldValues>;
    register: UseFormRegister<TFieldValues>;
    handleSubmit: UseFormHandleSubmit<TFieldValues, TTransformedValues>;
    unregister: UseFormUnregister<TFieldValues>;
    getFieldState: UseFormGetFieldState<TFieldValues>;
    setError: UseFormSetError<TFieldValues>;
};

type ControllerFieldState

type ControllerFieldState = {
    invalid: boolean;
    isTouched: boolean;
    isDirty: boolean;
    isValidating: boolean;
    error?: FieldError;
};

type ControllerProps

type ControllerProps<
    TFieldValues extends FieldValues = FieldValues,
    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
    TTransformedValues = TFieldValues
> = {
    render: ({
        field,
        fieldState,
        formState,
    }: {
        field: ControllerRenderProps<TFieldValues, TName>;
        fieldState: ControllerFieldState;
        formState: UseFormStateReturn<TFieldValues>;
    }) => React.ReactElement;
} & UseControllerProps<TFieldValues, TName, TTransformedValues>;

Render function to provide the control for the field.

Returns

all the event handlers, and relevant field and form state.

Example 1

const { field, fieldState, formState } = useController();

<Controller
  render={({ field, formState, fieldState }) => (
    <input
      onChange={field.onChange}
      onBlur={field.onBlur}
      name={field.name}
      ref={field.ref} // optional for focus management
    />
  )}
/>

type ControllerRenderProps

type ControllerRenderProps<
    TFieldValues extends FieldValues = FieldValues,
    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
    onChange: (...event: any[]) => void;
    onBlur: Noop;
    value: FieldPathValue<TFieldValues, TName>;
    disabled?: boolean;
    name: TName;
    ref: RefCallBack;
};

type CriteriaMode

type CriteriaMode = 'firstError' | 'all';

type CustomElement

type CustomElement<TFieldValues extends FieldValues> = Partial<HTMLElement> & {
    name: FieldName<TFieldValues>;
    type?: string;
    value?: any;
    disabled?: boolean;
    checked?: boolean;
    options?: HTMLOptionsCollection;
    files?: FileList | null;
    focus?: Noop;
};

type DeepMap

type DeepMap<T, TValue> = IsAny<T> extends true
    ? any
    : T extends BrowserNativeObject | NestedValue | OpaqueType
    ? TValue
    : T extends ReadonlyArray<infer U>
    ? Array<DeepMap<NonUndefined<U>, TValue> | undefined>
    : T extends object
    ? {
          [K in keyof T]: DeepMap<NonUndefined<T[K]>, TValue>;
      }
    : TValue;

type DeepPartial

type DeepPartial<T> = IsPrimitiveLike<T> extends true
    ? T
    : T extends BrowserNativeObject | NestedValue | OpaqueType
    ? T
    : {
          [K in keyof T]?: ExtractObjects<T[K]> extends never
              ? T[K]
              : DeepPartial<T[K]>;
      };

type DeepPartialSkipArrayKey

type DeepPartialSkipArrayKey<T> = IsPrimitiveLike<T> extends true
    ? T
    : T extends BrowserNativeObject | NestedValue | OpaqueType
    ? T
    : T extends ReadonlyArray<unknown>
    ? {
          [K in keyof T]: DeepPartialSkipArrayKey<T[K]>;
      }
    : {
          [K in keyof T]?: DeepPartialSkipArrayKey<T[K]>;
      };

type DeepRequired

type DeepRequired<T> = T extends BrowserNativeObject | Blob | OpaqueType
    ? T
    : {
          [K in keyof T]-?: NonNullable<DeepRequired<T[K]>>;
      };

type DefaultValues

type DefaultValues<TFieldValues> =
    TFieldValues extends AsyncDefaultValues<TFieldValues>
        ? DeepPartial<Awaited<TFieldValues>>
        : DeepPartial<TFieldValues>;

type DelayCallback

type DelayCallback = (wait: number) => void;

type EmptyObject

type EmptyObject = {
    [K in string | number]: never;
};

type ErrorMessageProps

type ErrorMessageProps<TFieldValues extends FieldValues = FieldValues> = {
    as?: React.ElementType;
    control?: Control<TFieldValues>;
    name: FieldPath<TFieldValues> | `root.${string}` | 'root';
    render?: (data: {
        message: Message;
        messages?: MultipleFieldErrors;
    }) => React.ReactNode;
};

type ErrorNamespacePath

type ErrorNamespacePath = 'root' | `root.${string}` | 'form' | `form.${string}`;

type ErrorOption

type ErrorOption = {
    message?: Message;
    type?: LiteralUnion<keyof RegisterOptions, string>;
    types?: MultipleFieldErrors;
};

type EventType

type EventType =
    | 'focus'
    | 'blur'
    | 'change'
    | 'changeText'
    | 'valueChange'
    | 'contentSizeChange'
    | 'endEditing'
    | 'keyPress'
    | 'submitEditing'
    | 'layout'
    | 'selectionChange'
    | 'longPress'
    | 'press'
    | 'pressIn'
    | 'pressOut'
    | 'momentumScrollBegin'
    | 'momentumScrollEnd'
    | 'scroll'
    | 'scrollBeginDrag'
    | 'scrollEndDrag'
    | 'load'
    | 'error'
    | 'progress'
    | 'custom';

type ExtractObjects

type ExtractObjects<T> = T extends infer U ? (U extends object ? U : never) : never;

type Field

type Field = {
    _f: {
        ref: Ref;
        name: InternalFieldName;
        refs?: HTMLInputElement[];
        mount?: boolean;
        _c?: boolean;
    } & RegisterOptions;
};

type FieldArray

type FieldArray<
    TFieldValues extends FieldValues = FieldValues,
    TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>
> = FieldArrayType<TFieldValues, TFieldArrayName>;

type FieldArrayMethodProps

type FieldArrayMethodProps = {
    shouldFocus?: boolean;
    focusIndex?: number;
    focusName?: string;
};

useFieldArray focus option, ability to toggle focus on and off with shouldFocus and setting focus by either field index or name.

type FieldArrayPath

type FieldArrayPath<TFieldValues extends FieldValues> = ArrayPath<TFieldValues>;

See ArrayPath

type FieldArrayPathByValue

type FieldArrayPathByValue<TFieldValues extends FieldValues, TValue> = {
    [Key in FieldArrayPath<TFieldValues>]: FieldArrayPathValue<
        TFieldValues,
        Key
    > extends TValue
        ? Key
        : never;
}[FieldArrayPath<TFieldValues>];

Type which eagerly collects all array paths through a fieldType that matches a give type

Example 1

FieldArrayPathByValue<{foo: {bar: number}[], baz: number, bar: string}, {bar: number}[]>
  = 'foo'

type FieldArrayPathValue

type FieldArrayPathValue<
    TFieldValues extends FieldValues,
    TFieldArrayPath extends FieldArrayPath<TFieldValues>
> = PathValue<TFieldValues, TFieldArrayPath>;

See PathValue

type FieldArrayProps

type FieldArrayProps<
    TFieldValues extends FieldValues = FieldValues,
    TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,
    TKeyName extends string = 'id'
> = {
    render: (
        fieldArray: UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>
    ) => React.ReactElement;
} & UseFieldArrayProps<TFieldValues, TFieldArrayName, TKeyName>;

Example 1

const { fields } = useFieldArray({
  name: 'test',
});

<FieldArray
  render={({ fields }) =>
    fields.map((field, index) => (
      <input key={field.id} {...register(`test.${index}.value`)} />
    ))
  }
/>

type FieldArrayWithId

type FieldArrayWithId<
    TFieldValues extends FieldValues = FieldValues,
    TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,
    TKeyName extends string = 'id'
> = FieldArray<TFieldValues, TFieldArrayName> & Record<TKeyName, string>;

useFieldArray returned fields with unique id

type FieldElement

type FieldElement<TFieldValues extends FieldValues = FieldValues> =
    | HTMLInputElement
    | HTMLSelectElement
    | HTMLTextAreaElement
    | CustomElement<TFieldValues>;

type FieldError

type FieldError = {
    type: LiteralUnion<keyof RegisterOptions, string>;
    root?: FieldError;
    ref?: Ref;
    types?: MultipleFieldErrors;
    message?: Message;
};

type FieldErrors

type FieldErrors<T extends FieldValues = FieldValues> = Partial<
    FieldErrorsImpl<DeepRequired<T>>
> & {
    root?: Record<string, GlobalError> & GlobalError;
    form?: Record<string, GlobalError> & GlobalError;
};

type FieldErrorsImpl

type FieldErrorsImpl<T extends FieldValues = FieldValues> = {
    [K in keyof T]?: T[K] extends BrowserNativeObject | Blob | OpaqueType
        ? FieldError
        : K extends 'root' | `root.${string}`
        ? GlobalError
        : T[K] extends object
        ? Merge<FieldError, FieldErrorsImpl<T[K]>>
        : FieldError;
};

type FieldName

type FieldName<TFieldValues extends FieldValues> =
    IsFlatObject<TFieldValues> extends true
        ? Extract<keyof TFieldValues, string>
        : string;

type FieldNamesMarkedBoolean

type FieldNamesMarkedBoolean<TFieldValues extends FieldValues> = DeepMap<
    DeepPartial<TFieldValues>,
    boolean
>;

type FieldPath

type FieldPath<TFieldValues extends FieldValues> = Path<TFieldValues>;

See Path

type FieldPathByValue

type FieldPathByValue<TFieldValues extends FieldValues, TValue> = {
    [Key in FieldPath<TFieldValues>]: FieldPathValue<
        TFieldValues,
        Key
    > extends TValue
        ? Key
        : never;
}[FieldPath<TFieldValues>];

Type which eagerly collects all paths through a fieldType that matches a give type

Example 1

FieldPathByValue<{foo: {bar: number}, baz: number, bar: string}, number>
  = 'foo.bar' | 'baz'

type FieldPathError

type FieldPathError<
    TFieldValues extends FieldValues,
    TFieldPath extends FieldPath<TFieldValues>
> = TFieldPath extends FieldPath<TFieldValues>
    ? TFieldPath extends `${string}.root`
        ? GlobalError
        : DeepRequired<
              NonNullable<FieldPathValue<TFieldValues, TFieldPath>>
          > extends infer TFieldValue
        ? IsAny<TFieldValue> extends true
            ? FieldError
            : NonNullable<
                  FieldErrorsImpl<{
                      value: TFieldValue;
                  }>['value']
              >
        : never
    : never;

Resolves the error type stored by FieldErrors for a field path.

type FieldPathValue

type FieldPathValue<
    TFieldValues extends FieldValues,
    TFieldPath extends FieldPath<TFieldValues>
> = PathValue<TFieldValues, TFieldPath>;

See PathValue

type FieldPathValues

type FieldPathValues<
    TFieldValues extends FieldValues,
    TPath extends FieldPath<TFieldValues>[] | readonly FieldPath<TFieldValues>[]
> = {} & {
    [K in keyof TPath]: FieldPathValue<
        TFieldValues,
        TPath[K] & FieldPath<TFieldValues>
    >;
};

Type to evaluate the type which the given paths point to.

Example 1

FieldPathValues<{foo: {bar: string}}, ['foo', 'foo.bar']>
  = [{bar: string}, string]

type FieldRefs

type FieldRefs = Partial<{
    [key: InternalFieldName]: Field | FieldRefs;
}>;

type FieldValue

type FieldValue<TFieldValues extends FieldValues> = TFieldValues[InternalFieldName];

type FieldValues

type FieldValues = Record<string, any>;

type FormProps

type FormProps<
    TFieldValues extends FieldValues,
    TTransformedValues = TFieldValues
> = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onError' | 'onSubmit'> &
    Partial<{
        control: Control<TFieldValues, any, TTransformedValues>;
        headers: Record<string, string>;
        validateStatus: (status: number) => boolean;
        onError: ({
            response,
            error,
        }:
            | {
                  response: Response;
                  error?: undefined;
              }
            | {
                  response?: undefined;
                  error: unknown;
              }) => void;
        onSuccess: ({ response }: { response: Response }) => void;
        onSubmit: FormSubmitHandler<TTransformedValues>;
        method: 'post' | 'put' | 'delete';
        children: React.ReactNode | React.ReactNode[];
        render: (props: {
            submit: (e?: React.FormEvent) => void;
        }) => React.ReactNode | React.ReactNode[];
        encType:
            | 'application/x-www-form-urlencoded'
            | 'multipart/form-data'
            | 'text/plain'
            | 'application/json';
    }>;

type FormProviderProps

type FormProviderProps<
    TFieldValues extends FieldValues = FieldValues,
    TContext = any,
    TTransformedValues = TFieldValues
> = {
    children: React.ReactNode | React.ReactNode[];
} & UseFormReturn<TFieldValues, TContext, TTransformedValues>;

type FormState

type FormState<TFieldValues extends FieldValues> = FormStateType<TFieldValues>;

type FormStateProps

type FormStateProps<
    TFieldValues extends FieldValues,
    TTransformedValues = TFieldValues
> = UseFormStateProps<TFieldValues, TTransformedValues> & {
    render: (values: UseFormStateReturn<TFieldValues>) => ReactNode;
};

type FormStateProxy

type FormStateProxy<TFieldValues extends FieldValues = FieldValues> = {
    isDirty: boolean;
    isValidating: boolean;
    dirtyFields: FieldNamesMarkedBoolean<TFieldValues>;
    touchedFields: FieldNamesMarkedBoolean<TFieldValues>;
    validatingFields: FieldNamesMarkedBoolean<TFieldValues>;
    errors: boolean;
    isValid: boolean;
};

type FormStateSubjectRef

type FormStateSubjectRef<TFieldValues extends FieldValues> = Subject<
    Partial<FormState<TFieldValues>> & {
        name?: InternalFieldName;
        values?: TFieldValues;
        type?: EventType;
    }
>;

type FormStateSubscribeProps

type FormStateSubscribeProps<
    TFieldValues extends FieldValues,
    TTransformedValues = TFieldValues
> = FormStateProps<TFieldValues, TTransformedValues>;

Deprecated
Use FormStateProps instead. Kept as an alias for backward compatibility.

type FormSubmitHandler

type FormSubmitHandler<TTransformedValues> = (payload: {
    data: TTransformedValues;
    event?: React.BaseSyntheticEvent;
    formData: FormData;
    formDataJson: string;
    method?: 'post' | 'put' | 'delete';
}) => unknown | Promise<unknown>;

type FormValidateResult

type FormValidateResult<T> =
    | Partial<
          Record<
              keyof T,
              {
                  message: Message | Message[] | boolean | undefined;
                  type?: string;
              }
          >
      >
    | string
    | boolean;

type FromSubscribe

type FromSubscribe<TFieldValues extends FieldValues> = <
    TFieldNames extends readonly FieldPath<TFieldValues>[]
>(payload: {
    name?: readonly [...TFieldNames] | TFieldNames[number];
    formState?: Partial<ReadFormState>;
    callback: (
        data: Partial<FormState<TFieldValues>> & {
            values: TFieldValues;
            name?: InternalFieldName;
        }
    ) => void;
    exact?: boolean;
    reRenderRoot?: boolean;
}) => () => void;

type GetErrorsResult

type GetErrorsResult<
    TFieldValues extends FieldValues,
    TName extends FieldPath<TFieldValues> | ErrorNamespacePath
> = TName extends 'root'
    ? (Record<string, GlobalError> & GlobalError) | undefined
    : TName extends ErrorNamespacePath
    ? GlobalError | undefined
    : TName extends FieldPath<TFieldValues>
    ? FieldPathError<TFieldValues, TName> | undefined
    : never;

Resolves the error type returned for a single getErrors path.

type GetIsDirty

type GetIsDirty = <TName extends InternalFieldName, TData>(
    name?: TName,
    data?: TData
) => boolean;

type GetValuesConfig

type GetValuesConfig = EitherOption<{
    dirtyFields: boolean;
    touchedFields: boolean;
}>;

type GlobalError

type GlobalError = Partial<{
    type: string | number;
    message: Message;
}>;

type InputValidationRules

type InputValidationRules = typeof INPUT_VALIDATION_RULES;

type InternalFieldErrors

type InternalFieldErrors = Partial<Record<InternalFieldName, FieldError>>;

type InternalFieldName

type InternalFieldName = string;

type InternalNameSet

type InternalNameSet = Set<InternalFieldName>;

type IsAny

type IsAny<T> = 0 extends 1 & T ? true : false;

Checks whether the type is any See https://stackoverflow.com/a/49928360/3406963

type IsEqual

type IsEqual<T1, T2> = T1 extends T2
    ? (<G>() => G extends T1 ? 1 : 2) extends <G>() => G extends T2 ? 1 : 2
        ? true
        : false
    : false;

Checks whether T1 can be exactly (mutually) assigned to T2

type IsFlatObject

type IsFlatObject<T extends object> = Extract<
    Exclude<T[keyof T], NestedValue | Date | FileList | OpaqueType>,
    unknown[] | object
> extends never
    ? true
    : false;

type IsNever

type IsNever<T> = [T] extends [never] ? true : false;

Checks whether the type is never

type KeepStateOptions

type KeepStateOptions = Partial<{
    keepDirtyValues: boolean;
    keepErrors: boolean;
    keepDirty: boolean;
    keepValues: boolean;
    keepDefaultValues: boolean;
    keepIsSubmitted: boolean;
    keepIsSubmitSuccessful: boolean;
    keepTouched: boolean;
    keepIsValidating: boolean;
    keepIsValid: boolean;
    keepSubmitCount: boolean;
    keepFieldsRef: boolean;
}>;

type LiteralUnion

type LiteralUnion<T extends U, U extends Primitive> =
    | T
    | (U & {
          _?: never;
      });

type MaxType

type MaxType = InputValidationRules['max'] | InputValidationRules['maxLength'];

type Merge

type Merge<A, B> = {
    [K in keyof A | keyof B]?: K extends keyof A & keyof B
        ? [A[K], B[K]] extends [object, object]
            ? Merge<A[K], B[K]>
            : B[K]
        : K extends keyof A
        ? A[K]
        : K extends keyof B
        ? B[K]
        : never;
};

type Message

type Message = string;

type MinType

type MinType = InputValidationRules['min'] | InputValidationRules['minLength'];

type Mode

type Mode = keyof ValidationMode;

type MultipleFieldErrors

type MultipleFieldErrors = {
    [K in keyof RegisterOptions]?: ValidateResult;
} & {
    [key: string]: ValidateResult;
};

type Names

type Names = {
    mount: InternalNameSet;
    unMount: InternalNameSet;
    disabled: InternalNameSet;
    array: InternalNameSet;
    watch: InternalNameSet;
    registerName: InternalNameSet;
    focus?: InternalFieldName;
    watchAll?: boolean;
};

type NativeFieldValue

type NativeFieldValue = string | number | boolean | null | undefined | unknown[];

type NestedValue

type NestedValue<TValue extends object = object> = {
    [$NestedValue]: never;
} & TValue;

Deprecated
to be removed in the next major version

type NonUndefined

type NonUndefined<T> = T extends undefined ? never : T;

type Noop

type Noop = () => void;

type OpaqueType

type OpaqueType = OpaqueTypes[keyof OpaqueTypes];

Union of all types registered in OpaqueTypes. never while the registry is empty.

type Path

type Path<T> = T extends unknown ? PathInternal<T> : never;

Type which eagerly collects all paths through a type
Example 1
Path<{foo: {bar: string}}> = 'foo' | 'foo.bar'

type PathString

type PathString = string;

Type alias to string which describes a lodash-like path through an object. E.g. 'foo.bar.0.baz'

type PathValue

type PathValue<T, P extends Path<T> | ArrayPath<T>> = PathValueImpl<T, P>;

Type to evaluate the type which the given path points to.

Example 1

PathValue<{foo: {bar: string}}, 'foo.bar'> = string
PathValue<[number, string], '1'> = string

type Primitive

type Primitive = null | undefined | string | number | boolean | symbol | bigint;

type ReadFormState

type ReadFormState = {
    [K in keyof FormStateProxy]: boolean | 'all';
} & {
    values?: boolean;
    defaultValues?: boolean | 'all';
    isSubmitted?: boolean | 'all';
    submitCount?: boolean | 'all';
};

type Ref

type Ref = FieldElement;

type RefCallBack

type RefCallBack = (instance: any) => void;

type RegisterOptions

type RegisterOptions<
    TFieldValues extends FieldValues = FieldValues,
    TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = Partial<{
    required: Message | ValidationRule<boolean>;
    min: ValidationRule<number | string>;
    max: ValidationRule<number | string>;
    maxLength: ValidationRule<number>;
    minLength: ValidationRule<number>;
    validate:
        | Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>
        | Record<
              string,
              Validate<FieldPathValue<TFieldValues, TFieldName>, TFieldValues>
          >;
    value: FieldPathValue<TFieldValues, TFieldName>;
    setValueAs: (value: any) => any;
    shouldUnregister?: boolean;
    onChange?: (event: any) => void;
    onBlur?: (event: any) => void;
    disabled: boolean;
    deps: FieldPath<TFieldValues> | FieldPath<TFieldValues>[];
}> &
    (
        | {
              pattern?: ValidationRule<RegExp>;
              valueAsNumber?: false;
              valueAsDate?: false;
          }
        | {
              pattern?: undefined;
              valueAsNumber?: false;
              valueAsDate?: true;
          }
        | {
              pattern?: undefined;
              valueAsNumber?: true;
              valueAsDate?: false;
          }
    );

type ResetFieldConfig

type ResetFieldConfig<
    TFieldValues extends FieldValues,
    TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = Partial<{
    keepDirty: boolean;
    keepTouched: boolean;
    keepError: boolean;
    defaultValue: FieldPathValue<TFieldValues, TFieldName>;
}>;

type Resolver

type Resolver<
    TFieldValues extends FieldValues = FieldValues,
    TContext = any,
    TTransformedValues = TFieldValues
> = (
    values: TFieldValues,
    context: TContext | undefined,
    options: ResolverOptions<TFieldValues>
) =>
    | Promise<ResolverResult<TFieldValues, TTransformedValues>>
    | ResolverResult<TFieldValues, TTransformedValues>;

type ResolverError

type ResolverError<TFieldValues extends FieldValues = FieldValues> = {
    values: Record<string, never>;
    errors: FieldErrors<TFieldValues>;
};

type ResolverResult

type ResolverResult<
    TFieldValues extends FieldValues = FieldValues,
    TTransformedValues = TFieldValues
> = ResolverSuccess<TTransformedValues> | ResolverError<TFieldValues>;

type ResolverSuccess

type ResolverSuccess<TTransformedValues> = {
    values: TTransformedValues;
    errors: Record<string, never>;
};

type SetFieldValue

type SetFieldValue<TFieldValues extends FieldValues> = FieldValue<TFieldValues>;

type SetFocusOptions

type SetFocusOptions = Partial<{
    shouldSelect: boolean;
}>;

type SetValueConfig

type SetValueConfig = Partial<{
    shouldValidate: boolean;
    shouldDirty: boolean;
    shouldTouch: boolean;
    delayError: boolean;
}>;

type Subjects

type Subjects<TFieldValues extends FieldValues = FieldValues> = {
    array: Subject<{
        name?: InternalFieldName;
        values?: FieldValues;
    }>;
    state: FormStateSubjectRef<TFieldValues>;
};

type SubmitErrorHandler

type SubmitErrorHandler<TFieldValues extends FieldValues> = (
    errors: FieldErrors<TFieldValues>,
    event?: React.BaseSyntheticEvent
) => unknown | Promise<unknown>;

type SubmitHandler

type SubmitHandler<T, TResult = unknown> = (
    data: T,
    event?: React.BaseSyntheticEvent
) => TResult;

type TriggerConfig

type TriggerConfig = Partial<{
    shouldFocus: boolean;
    shouldTouch: boolean;
}>;

type UseControllerProps

type UseControllerProps<
    TFieldValues extends FieldValues = FieldValues,
    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
    TTransformedValues = TFieldValues
> = {
    name: TName;
    rules?: Omit<
        RegisterOptions<TFieldValues, TName>,
        'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
    >;
    shouldUnregister?: boolean;
    defaultValue?: FieldPathValue<TFieldValues, TName>;
    control?: Control<TFieldValues, any, TTransformedValues>;
    disabled?: boolean;
    exact?: boolean;
};

type UseControllerReturn

type UseControllerReturn<
    TFieldValues extends FieldValues = FieldValues,
    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
    field: ControllerRenderProps<TFieldValues, TName>;
    formState: UseFormStateReturn<TFieldValues>;
    fieldState: ControllerFieldState;
};

type UseFieldArrayAppend

type UseFieldArrayAppend<
    TFieldValues extends FieldValues,
    TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>
> = (
    value:
        | FieldArray<TFieldValues, TFieldArrayName>
        | FieldArray<TFieldValues, TFieldArrayName>[],
    options?: FieldArrayMethodProps
) => void;

Append field/fields to the end of your fields and focus. The input value will be registered during this action.

Parameter value

append items or items.

Parameter options

focus options

Remarks

[API](https://react-hook-form.com/docs/usefieldarray) • [Demo](https://codesandbox.io/s/calc-i231d)

Example 1

<button type="button" onClick={() => append({ name: "data" })}>Append</button>
<button type="button" onClick={() => append({ name: "data" }, { shouldFocus: false })}>Append</button>
<button
  type="button"
  onClick={() => append([{ name: "data" }, { name: "data" }])}
>
  Append
</button>

type UseFieldArrayInsert

type UseFieldArrayInsert<
    TFieldValues extends FieldValues,
    TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>
> = (
    index: number,
    value:
        | FieldArray<TFieldValues, TFieldArrayName>
        | FieldArray<TFieldValues, TFieldArrayName>[],
    options?: FieldArrayMethodProps
) => void;

Insert field/fields at particular position and focus.

Parameter index

insert position

Parameter value

insert field or fields

Parameter options

focus options

Remarks

[API](https://react-hook-form.com/docs/usefieldarray) • [Demo](https://codesandbox.io/s/calc-i231d)

Example 1

<button type="button" onClick={() => insert(1, { name: "data" })}>Insert</button>
<button type="button" onClick={() => insert(1, { name: "data" }, { shouldFocus: false })}>Insert</button>
<button
  type="button"
  onClick={() => insert(1, [{ name: "data" }, { name: "data" }])}
>
  Insert
</button>

type UseFieldArrayMove

type UseFieldArrayMove = (indexA: number, indexB: number) => void;

Move field array by supplying from and to index
Parameter indexA
from index
Parameter indexB
to index
Remarks
[API](https://react-hook-form.com/docs/usefieldarray) • [Demo](https://codesandbox.io/s/calc-i231d)
Example 1
<button type="button" onClick={() => move(0, 1)}>swap</button>

type UseFieldArrayPrepend

type UseFieldArrayPrepend<
    TFieldValues extends FieldValues,
    TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>
> = (
    value:
        | FieldArray<TFieldValues, TFieldArrayName>
        | FieldArray<TFieldValues, TFieldArrayName>[],
    options?: FieldArrayMethodProps
) => void;

Prepend field/fields to the start of the fields and optionally focus. The input value will be registered during this action.

Parameter value

prepend items or items

Parameter options

focus options

Remarks

[API](https://react-hook-form.com/docs/usefieldarray) • [Demo](https://codesandbox.io/s/calc-i231d)

Example 1

<button type="button" onClick={() => prepend({ name: "data" })}>Prepend</button>
<button type="button" onClick={() => prepend({ name: "data" }, { shouldFocus: false })}>Prepend</button>
<button
  type="button"
  onClick={() => prepend([{ name: "data" }, { name: "data" }])}
>
  Prepend
</button>

type UseFieldArrayProps

type UseFieldArrayProps<
    TFieldValues extends FieldValues = FieldValues,
    TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,
    TKeyName extends string = 'id',
    TTransformedValues = TFieldValues
> = {
    name: TFieldArrayName;
    keyName?: TKeyName;
    control?: Control<TFieldValues, any, TTransformedValues>;
    rules?: {
        validate?:
            | Validate<FieldArray<TFieldValues, TFieldArrayName>[], TFieldValues>
            | Record<
                  string,
                  Validate<FieldArray<TFieldValues, TFieldArrayName>[], TFieldValues>
              >;
    } & Pick<RegisterOptions<TFieldValues>, 'maxLength' | 'minLength' | 'required'>;
    shouldUnregister?: boolean;
    disabled?: boolean;
};

type UseFieldArrayRemove

type UseFieldArrayRemove = (index?: number | number[]) => void;

Remove field/fields at particular position.
Parameter index
index to remove at, or remove all when no index provided.
Remarks
[API](https://react-hook-form.com/docs/usefieldarray) • [Demo](https://codesandbox.io/s/calc-i231d)
Example 1
<button type="button" onClick={() => remove(0)}>Remove</button> <button type="button" onClick={() => remove()} > Remove all </button>

type UseFieldArrayReplace

type UseFieldArrayReplace<
    TFieldValues extends FieldValues,
    TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>
> = (
    value:
        | FieldArray<TFieldValues, TFieldArrayName>
        | FieldArray<TFieldValues, TFieldArrayName>[]
) => void;

Replace the entire field array values.
Parameter value
the entire field values.
Remarks
[API](https://react-hook-form.com/docs/usefieldarray) • [Demo](https://codesandbox.io/s/calc-i231d)
Example 1
<button type="button" onClick={() => replace([{ name: "data" }, { name: "data" }])} > Replace </button>

type UseFieldArrayReturn

type UseFieldArrayReturn<
    TFieldValues extends FieldValues = FieldValues,
    TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,
    TKeyName extends string = 'id'
> = {
    swap: UseFieldArraySwap;
    move: UseFieldArrayMove;
    prepend: UseFieldArrayPrepend<TFieldValues, TFieldArrayName>;
    append: UseFieldArrayAppend<TFieldValues, TFieldArrayName>;
    remove: UseFieldArrayRemove;
    insert: UseFieldArrayInsert<TFieldValues, TFieldArrayName>;
    update: UseFieldArrayUpdate<TFieldValues, TFieldArrayName>;
    replace: UseFieldArrayReplace<TFieldValues, TFieldArrayName>;
    fields: (FieldArrayWithId<TFieldValues, TFieldArrayName, TKeyName> & {
        disabled?: boolean;
    })[];
};

type UseFieldArraySwap

type UseFieldArraySwap = (indexA: number, indexB: number) => void;

Swap field array by supplying from and to index
Parameter indexA
from index
Parameter indexB
to index
Remarks
[API](https://react-hook-form.com/docs/usefieldarray) • [Demo](https://codesandbox.io/s/calc-i231d)
Example 1
<button type="button" onClick={() => swap(0, 1)}>swap</button>

type UseFieldArrayUpdate

type UseFieldArrayUpdate<
    TFieldValues extends FieldValues,
    TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>
> = (index: number, value: FieldArray<TFieldValues, TFieldArrayName>) => void;

Update field/fields at particular position.
Parameter index
insert position
Parameter value
insert field or fields
Remarks
[API](https://react-hook-form.com/docs/usefieldarray) • [Demo](https://codesandbox.io/s/calc-i231d)
Example 1
<button type="button" onClick={() => update(1, { name: "data" })}>Update</button> <button type="button" onClick={() => update(1, [{ name: "data" }, { name: "data" }])} > Update </button>

type UseFormClearErrors

type UseFormClearErrors<TFieldValues extends FieldValues> = (
    name?:
        | FieldPath<TFieldValues>
        | FieldPath<TFieldValues>[]
        | readonly FieldPath<TFieldValues>[]
        | ErrorNamespacePath
) => void;

Clears all form errors.
Parameter name
The path name to the form field value.
Remarks
[API](https://react-hook-form.com/docs/useform/clearerrors) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-clearerrors-w3ymx)
Example 1
Clear all errors
clearErrors(); // clear the entire form error clearErrors(["name", "name1"]) // clear an array of fields' error clearErrors("name2"); // clear a single field error

type UseFormGetErrors

type UseFormGetErrors<TFieldValues extends FieldValues> = {
    /**
     * Get all currently stored form errors without subscribing or running validation.
     *
     * @returns Form errors.
     *
     * @example
     * ```tsx
     * const errors = getErrors();
     * ```
     */
    (name?: undefined): FieldErrors<TFieldValues>;
    /**
     * Get a currently stored field or global error without subscribing or running validation.
     *
     * @param name - The path to the error.
     *
     * @returns The error at the given path.
     *
     * @example
     * ```tsx
     * const emailError = getErrors("email");
     * ```
     */
    <TName extends FieldPath<TFieldValues> | ErrorNamespacePath>(
        name: TName
    ): GetErrorsResult<TFieldValues, TName>;
    /**
     * Get currently stored errors for multiple paths without subscribing or running validation.
     *
     * @param names - An array of error paths.
     *
     * @returns Errors for the given paths in the same order.
     *
     * @example
     * ```tsx
     * const [emailError, nameError] = getErrors(["email", "name"]);
     * ```
     */
    <TNames extends (FieldPath<TFieldValues> | ErrorNamespacePath)[]>(
        names: readonly [...TNames]
    ): {
        [K in keyof TNames]: GetErrorsResult<TFieldValues, TNames[K]>;
    };
};

Gets currently stored form errors without subscribing or running validation.

type UseFormGetFieldState

type UseFormGetFieldState<TFieldValues extends FieldValues> = <
    TFieldName extends FieldPath<TFieldValues>
>(
    name: TFieldName,
    formState?: FormState<TFieldValues>
) => {
    invalid: boolean;
    isDirty: boolean;
    isTouched: boolean;
    isValidating: boolean;
    error?: FieldPathError<TFieldValues, TFieldName>;
};

This method will return individual field states. It will be useful when you are trying to retrieve the nested value field state in a type-safe approach.
Parameter name
The path name to the form field value.
Returns
invalid, isDirty, isTouched, isValidating, and error object.
Remarks
[API](https://react-hook-form.com/docs/useform/getfieldstate) • [Demo](https://codesandbox.io/s/getfieldstate-jvekk)
Example 1
// those formState has to be subscribed const { formState: { dirtyFields, errors, touchedFields } } = formState(); getFieldState('name') // Get field state when form state is not subscribed yet getFieldState('name', formState) // It's ok to combine with useFormState const formState = useFormState(); getFieldState('name') getFieldState('name', formState)

type UseFormGetValues

type UseFormGetValues<TFieldValues extends FieldValues> = {
    /**
     * Get the entire form values when no argument is supplied to this function.
     *
     * @remarks
     * [API](https://react-hook-form.com/docs/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
     *
     * @returns Form values.
     *
     * @example
     * ```tsx
     * <button onClick={() => getValues()}>getValues</button>
     *
     * <input {...register("name", {
     *   validate: (value, formValues) => formValues.otherField === value
     * })} />
     * ```
     */
    (name?: undefined, config?: GetValuesConfig): TFieldValues;
    /**
     * Get a single field value.
     *
     * @remarks
     * [API](https://react-hook-form.com/docs/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
     *
     * @param name - The path name to the form field value.
     * @param config - Return touched or dirty fields.
     *
     * @returns the single field value
     *
     * @example
     * ```tsx
     * <button onClick={() => getValues("name")}>getValues</button>
     *
     * <input {...register("name", {
     *   validate: () => getValues('otherField') === "test"
     * })} />
     * ```
     */
    <TFieldName extends FieldPath<TFieldValues>>(
        name: TFieldName,
        config?: GetValuesConfig
    ): FieldPathValue<TFieldValues, TFieldName>;
    /**
     * Get an array of field values.
     *
     * @remarks
     * [API](https://react-hook-form.com/docs/useform/getvalues) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-getvalues-txsfg)
     *
     * @param names - an array of field names
     * @param config - return touched or dirty fields
     *
     * @returns An array of field values
     *
     * @example
     * ```tsx
     * <button onClick={() => getValues(["name", "name1"])}>getValues</button>
     *
     * <input {...register("name", {
     *   validate: () => getValues(["fieldA", "fieldB"]).includes("test")
     * })} />
     * ```
     */
    <TFieldNames extends FieldPath<TFieldValues>[]>(
        names: readonly [...TFieldNames],
        config?: GetValuesConfig
    ): [...FieldPathValues<TFieldValues, TFieldNames>];
};

type UseFormHandleSubmit

type UseFormHandleSubmit<
    TFieldValues extends FieldValues,
    TTransformedValues = TFieldValues
> = <TResult>(
    onValid: SubmitHandler<TTransformedValues, TResult>,
    onInvalid?: SubmitErrorHandler<TFieldValues>
) => (e?: React.BaseSyntheticEvent) => Promise<Awaited<TResult> | undefined>;

Validates the entire form. Handles the submit and error callbacks.
Parameter onValid
Callback function invoked after the form passes validation.
Parameter onInvalid
Callback function invoked when the form fails validation.
Returns
Callback function.
Remarks
[API](https://react-hook-form.com/docs/useform/handlesubmit) • [Demo](https://codesandbox.io/s/react-hook-form-handlesubmit-ts-v7-lcrtu) • [Video](https://www.youtube.com/watch?v=KzcPKB9SOEk)
Example 1
const onSubmit = (data) => console.log(data); const onError = (error) => console.log(error); <form onSubmit={handleSubmit(onSubmit, onError)} />

type UseFormProps

type UseFormProps<
    TFieldValues extends FieldValues = FieldValues,
    TContext = any,
    TTransformedValues = TFieldValues
> = Partial<{
    mode: Mode;
    disabled: boolean;
    reValidateMode: Exclude<Mode, 'onTouched' | 'all'>;
    defaultValues: DefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;
    values: TFieldValues;
    errors: FieldErrors<TFieldValues>;
    resetOptions: Parameters<UseFormReset<TFieldValues>>[1];
    resolver: Resolver<TFieldValues, TContext, TTransformedValues>;
    context: TContext;
    shouldFocusError: boolean;
    shouldUnregister: boolean;
    shouldUseNativeValidation: boolean;
    progressive: boolean;
    criteriaMode: CriteriaMode;
    delayError: number;
    formControl?: Omit<
        UseFormReturn<TFieldValues, TContext, TTransformedValues>,
        'formState'
    >;
    validate: ValidateForm<TFieldValues>;
}>;

type UseFormRegister

type UseFormRegister<TFieldValues extends FieldValues> = <
    TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>(
    name: TFieldName,
    options?: RegisterOptions<TFieldValues, TFieldName>
) => UseFormRegisterReturn<TFieldName>;

Registers a field into hook form with or without the actual DOM ref. You can invoke register anywhere in the component including in useEffect.

Parameter name

The path name to the form field value; name is required and unique.

Parameter options

Returns

onChange, onBlur, name, ref, and native HTML validation attributes if browser validation is enabled.

Remarks

[API](https://react-hook-form.com/docs/useform/register) • [Demo](https://codesandbox.io/s/react-hook-form-register-ts-ip2j3) • [Video](https://www.youtube.com/watch?v=JFIpCoajYkA)

Example 1

// Register HTML native input
<input {...register("input")} />
<select {...register("select")} />

// Register options
<textarea {...register("textarea", { required: "This is required.", maxLength: 20 })} />
<input type="number" {...register("name2", { valueAsNumber: true })} />
<input {...register("name3", { deps: ["name2"] })} />

// Register custom field at useEffect
useEffect(() => {
  register("name4");
  register("name5", { value: "hiddenValue" });
}, [register])

// Register without ref
const { onChange, onBlur, name } = register("name6")
<input onChange={onChange} onBlur={onBlur} name={name} />

type UseFormRegisterReturn

type UseFormRegisterReturn<
    TFieldName extends InternalFieldName = InternalFieldName
> = {
    onChange: ChangeHandler;
    onBlur: ChangeHandler;
    ref: RefCallBack;
    name: TFieldName;
    min?: string | number;
    max?: string | number;
    maxLength?: number;
    minLength?: number;
    pattern?: string;
    required?: boolean;
    disabled?: boolean;
};

type UseFormReset

type UseFormReset<TFieldValues extends FieldValues> = (
    values?: DefaultValues<TFieldValues> | TFieldValues | ResetAction<TFieldValues>,
    keepStateOptions?: KeepStateOptions
) => void;

Resets the entire form state.

Parameter values

The entire form values to be reset.

Parameter keepStateOptions

Keep form state options.

Remarks

[API](https://react-hook-form.com/docs/useform/reset) • [Demo](https://codesandbox.io/s/react-hook-form-reset-v7-ts-pu901) • [Video](https://www.youtube.com/watch?v=qmCLBjyPwVk)

Example 1

useEffect(() => {
  // reset the entire form after component mount or form defaultValues are ready
  reset({
    fieldA: "test",
    fieldB: "test"
  });
}, [reset])

// Reset by combining with existing form values
reset({
  ...getValues(),
 fieldB: "test"
});

// reset and keep form state
reset({
  ...getValues(),
}, {
  keepErrors: true,
  keepDirty: true
});

type UseFormResetDefaultValues

type UseFormResetDefaultValues<TFieldValues extends FieldValues> = (
    values: DefaultValues<TFieldValues> | TFieldValues,
    options?: Partial<Pick<KeepStateOptions, 'keepDirty' | 'keepIsValid'>>
) => void;

Resets the default values of the form and recomputes dirtyFields/isDirty without changing user values.
Parameter values
The new default values.
Parameter options
Options to keep dirty or isValid state.
Remarks
[API](https://react-hook-form.com/docs/useform/resetdefaultvalues)
Example 1
// After a successful submission, update defaults to the submitted values // so that dirtyFields/isDirty reflect changes made after that point. const onSuccess = () => { resetDefaultValues(submittedValues); };

type UseFormResetField

type UseFormResetField<TFieldValues extends FieldValues> = <
    TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>(
    name: TFieldName,
    options?: ResetFieldConfig<TFieldValues, TFieldName>
) => void;

Resets a field's state and reference.
Parameter name
The path name to the form field value.
Parameter options
Keep form state options.
Remarks
[API](https://react-hook-form.com/docs/useform/resetfield) • [Demo](https://codesandbox.io/s/priceless-firefly-d0kuv) • [Video](https://www.youtube.com/watch?v=IdLFcNaEFEo)
Example 1
<input {...register("firstName", { required: true })} /> <button type="button" onClick={() => resetField("firstName")}>Reset</button>

type UseFormReturn

type UseFormReturn<
    TFieldValues extends FieldValues = FieldValues,
    TContext = any,
    TTransformedValues = TFieldValues
> = {
    watch: UseFormWatch<TFieldValues>;
    getValues: UseFormGetValues<TFieldValues>;
    getErrors: UseFormGetErrors<TFieldValues>;
    getFieldState: UseFormGetFieldState<TFieldValues>;
    setError: UseFormSetError<TFieldValues>;
    clearErrors: UseFormClearErrors<TFieldValues>;
    setValue: UseFormSetValue<TFieldValues>;
    setValues: UseFormSetValues<TFieldValues>;
    trigger: UseFormTrigger<TFieldValues>;
    formState: FormState<TFieldValues>;
    resetField: UseFormResetField<TFieldValues>;
    reset: UseFormReset<TFieldValues>;
    resetDefaultValues: UseFormResetDefaultValues<TFieldValues>;
    handleSubmit: UseFormHandleSubmit<TFieldValues, TTransformedValues>;
    unregister: UseFormUnregister<TFieldValues>;
    control: Control<TFieldValues, TContext, TTransformedValues>;
    register: UseFormRegister<TFieldValues>;
    setFocus: UseFormSetFocus<TFieldValues>;
    subscribe: UseFormSubscribe<TFieldValues>;
};

type UseFormSetError

type UseFormSetError<TFieldValues extends FieldValues> = (
    name: FieldPath<TFieldValues> | ErrorNamespacePath,
    error: ErrorOption,
    options?: {
        shouldFocus: boolean;
    }
) => void;

Sets an error for a field. When setting an error that is not associated with a field, a manual clearErrors call is required.
Parameter name
The path name to the form field value.
Parameter error
An error object containing the type and an optional message.
Parameter options
Whether or not to focus on the field.
Remarks
[API](https://react-hook-form.com/docs/useform/seterror) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-seterror-nfxxu) • [Video](https://www.youtube.com/watch?v=raMqvE0YyIY)
Example 1
// When the error is not associated with any fields, `clearErrors` will need to be invoked to clear the error. const onSubmit = () => setError("serverError", { type: "server", message: "Error occurred"}) <button onClick={() => setError("name", { type: "min" })} /> // focus on the input after setting the error <button onClick={() => setError("name", { type: "max" }, { shouldFocus: true })} />

type UseFormSetFocus

type UseFormSetFocus<TFieldValues extends FieldValues> = <
    TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>(
    name: TFieldName,
    options?: SetFocusOptions
) => void;

Sets focus on a registered field. You can start to invoke this method after all fields are mounted to the DOM.
Parameter name
The path name to the form field value.
Parameter options
Input focus behavior options.
Remarks
[API](https://react-hook-form.com/docs/useform/setfocus) • [Demo](https://codesandbox.io/s/setfocus-rolus)
Example 1
useEffect(() => { setFocus("name"); }, [setFocus]) // shouldSelect allows to select input's content on focus <button onClick={() => setFocus("name", { shouldSelect: true })}>Focus</button>

type UseFormSetValue

type UseFormSetValue<TFieldValues extends FieldValues> = <
    TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>(
    name: TFieldName,
    value: FieldPathValue<TFieldValues, TFieldName>,
    options?: SetValueConfig
) => void;

Sets a single field value, or a group of field values.

Parameter name

The path name to the form field value.

Parameter value

Field value.

Parameter options

Should validate or update form state.

Remarks

[API](https://react-hook-form.com/docs/useform/setvalue) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-setvalue-8z9hx) • [Video](https://www.youtube.com/watch?v=qpv51sCH3fI)

Example 1

// Update a single field
setValue('name', 'value', {
  shouldValidate: true, // trigger validation
  shouldTouch: true, // update touched fields form state
  shouldDirty: true, // update dirty and dirty fields form state
});

// Update a group of fields
setValue('root', {
  a: 'test', // setValue('root.a', 'data')
  b: 'test1', // setValue('root.b', 'data')
});

// Update a nested object field
setValue('select', { label: 'test', value: 'Test' });

type UseFormSetValues

type UseFormSetValues<TFieldValues extends FieldValues> = (
    value: Partial<TFieldValues> | ResetAction<TFieldValues>,
    options?: SetValueConfig
) => void;

type UseFormStateProps

type UseFormStateProps<
    TFieldValues extends FieldValues,
    TTransformedValues = TFieldValues
> = Partial<{
    control?: Control<TFieldValues, any, TTransformedValues>;
    disabled?: boolean;
    name?:
        | FieldPath<TFieldValues>
        | FieldPath<TFieldValues>[]
        | readonly FieldPath<TFieldValues>[];
    exact?: boolean;
}>;

type UseFormStateReturn

type UseFormStateReturn<TFieldValues extends FieldValues> = FormState<TFieldValues>;

type UseFormSubscribe

type UseFormSubscribe<TFieldValues extends FieldValues> = <
    TFieldNames extends readonly FieldPath<TFieldValues>[]
>(payload: {
    name?: readonly [...TFieldNames] | TFieldNames[number];
    formState?: Partial<ReadFormState>;
    callback: (
        data: Partial<FormState<TFieldValues>> & {
            values: TFieldValues;
            name?: InternalFieldName;
            type?: EventType;
        }
    ) => void;
    exact?: boolean;
}) => () => void;

This method will allow you to subscribe to formState without a component re-rendering.
Parameter options
Subscription options to which formState subscribes.
Remarks
[API](https://react-hook-form.com/docs/useform/subscribe) • [Demo](https://codesandbox.io/s/subscribe)
Example 1
const { subscribe } = useForm() useEffect(() => { subscribe({ formState: { isDirty: true }, callback: () => {} }) })

type UseFormTrigger

type UseFormTrigger<TFieldValues extends FieldValues> = (
    name?:
        | FieldPath<TFieldValues>
        | FieldPath<TFieldValues>[]
        | readonly FieldPath<TFieldValues>[],
    options?: TriggerConfig
) => Promise<boolean>;

Triggers field or form validation.
Parameter name
Providing no argument will trigger the entire form validation; an array of field names will validate those fields, and a single field name will only trigger that field's validation.
Parameter options
Should focus on the error field, and/or mark the triggered field(s) as touched.
Returns
Validation result.
Remarks
[API](https://react-hook-form.com/docs/useform/trigger) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-triggervalidation-forked-xs7hl) • [Video](https://www.youtube.com/watch?v=-bcyJCDjksE)
Example 1
useEffect(() => { trigger(); }, [trigger]) <button onClick={async () => { const result = await trigger(); // result will be a boolean value }}> trigger </button>

type UseFormUnregister

type UseFormUnregister<TFieldValues extends FieldValues> = (
    name?:
        | FieldPath<TFieldValues>
        | FieldPath<TFieldValues>[]
        | readonly FieldPath<TFieldValues>[],
    options?: Omit<
        KeepStateOptions,
        | 'keepIsSubmitted'
        | 'keepSubmitCount'
        | 'keepValues'
        | 'keepDefaultValues'
        | 'keepErrors'
    > & {
        keepValue?: boolean;
        keepDefaultValue?: boolean;
        keepError?: boolean;
    }
) => void;

Unregisters a field reference and removes its value.
Parameter name
The path name to the form field value.
Parameter options
Keep form state options.
Remarks
[API](https://react-hook-form.com/docs/useform/unregister) • [Demo](https://codesandbox.io/s/react-hook-form-unregister-4k2ey) • [Video](https://www.youtube.com/watch?v=TM99g_NW5Gk&feature=emb_imp_woyt)
Example 1
register("name", { required: true }) <button onClick={() => unregister("name")} /> // there are various keep options to retain formState <button onClick={() => unregister("name", { keepErrors: true })} />

type UseFormWatch

type UseFormWatch<TFieldValues extends FieldValues> = {
    /**
     * Watch and subscribe to all form updates and changes based on onChange, and trigger re-renders at the useForm level.
     *
     * @remarks
     * [API](https://react-hook-form.com/docs/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
     *
     * @returns The entire form values.
     *
     * @example
     * ```tsx
     * const formValues = watch();
     * ```
     */
    (): TFieldValues;
    /**
     * Watch and subscribe to an array of fields used outside of render.
     *
     * @remarks
     * [API](https://react-hook-form.com/docs/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
     *
     * @param names - An array of field names.
     * @param defaultValue - DefaultValues for the entire form.
     *
     * @returns An array of field values.
     *
     * @example
     * ```tsx
     * const [name, name1] = watch(["name", "name1"]);
     * ```
     */
    <TFieldNames extends readonly FieldPath<TFieldValues>[]>(
        names: readonly [...TFieldNames],
        defaultValue?: DeepPartial<TFieldValues>
    ): FieldPathValues<TFieldValues, TFieldNames>;
    /**
     * Watch and subscribe to a single field used outside of render.
     *
     * @remarks
     * [API](https://react-hook-form.com/docs/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
     *
     * @param name - the path name to the form field value.
     * @param defaultValue - defaultValues for the entire form
     *
     * @returns the single field value
     *
     * @example
     * ```tsx
     * const name = watch("name");
     * ```
     */
    <TFieldName extends FieldPath<TFieldValues>>(
        name: TFieldName,
        defaultValue?: FieldPathValue<TFieldValues, TFieldName>
    ): FieldPathValue<TFieldValues, TFieldName>;
    /**
     * Subscribe to field updates and changes without triggering a re-render.
     *
     * @remarks
     * [API](https://react-hook-form.com/docs/useform/watch) • [Demo](https://codesandbox.io/s/react-hook-form-watch-v7-ts-8et1d) • [Video](https://www.youtube.com/watch?v=3qLd69WMqKk)
     *
     * @param callback - Callback function to subscribe to all field changes and return an unsubscribe function.
     * @param defaultValues - DefaultValues for the entire form.
     *
     * @returns Unsubscribe function.
     *
     * @example
     * ```tsx
     * useEffect(() => {
     *   const { unsubscribe } = watch((value) => {
     *     console.log(value);
     *   });
     *   return () => unsubscribe();
     * }, [watch])
     * ```
     */
    (
        callback: WatchObserver<TFieldValues>,
        defaultValues?: DeepPartial<TFieldValues>
    ): Subscription;
};

type UseWatchProps

type UseWatchProps<TFieldValues extends FieldValues = FieldValues> = {
    defaultValue?: unknown;
    disabled?: boolean;
    name?:
        | FieldPath<TFieldValues>
        | FieldPath<TFieldValues>[]
        | readonly FieldPath<TFieldValues>[];
    control?: Control<TFieldValues>;
    exact?: boolean;
    compute?: (formValues: TFieldValues) => TFieldValues;
};

type Validate

type Validate<TFieldValue, TFormValues> = (
    value: TFieldValue,
    formValues: TFormValues
) => ValidateResult | Promise<ValidateResult>;

type ValidateForm

type ValidateForm<
    TFormValues extends FieldValues,
    TFieldName extends FieldPath<TFormValues> = FieldPath<TFormValues>
> = (props: {
    formValues: TFormValues;
    formState: FormState<TFormValues>;
    eventType?: ValidateFormEventType;
    name?: TFieldName | TFieldName[];
}) => FormValidateResult<TFormValues> | Promise<FormValidateResult<TFormValues>>;

type ValidateFormEventType

type ValidateFormEventType = (typeof EVENTS)[keyof typeof EVENTS];

type ValidateResult

type ValidateResult = Message | Message[] | boolean | undefined;

type ValidationMode

type ValidationMode = typeof VALIDATION_MODE;

type ValidationModeFlags

type ValidationModeFlags = {
    isOnSubmit: boolean;
    isOnBlur: boolean;
    isOnChange: boolean;
    isOnAll: boolean;
    isOnTouch: boolean;
};

type ValidationRule

type ValidationRule<TValidationValue extends ValidationValue = ValidationValue> =
    | TValidationValue
    | ValidationValueMessage<TValidationValue>;

type ValidationValue

type ValidationValue = boolean | number | string | RegExp;

type ValidationValueMessage

type ValidationValueMessage<
    TValidationValue extends ValidationValue = ValidationValue
> = {
    value: TValidationValue | undefined;
    message: Message;
};

type WatchDefaultValue

type WatchDefaultValue<
    TFieldName,
    TFieldValues extends FieldValues = FieldValues
> = TFieldName extends FieldPath<TFieldValues>
    ? FieldPathValue<TFieldValues, TFieldName>
    : DeepPartialSkipArrayKey<TFieldValues>;

type WatchInternal

type WatchInternal<TFieldValues> = (
    fieldNames?: InternalFieldName | InternalFieldName[],
    defaultValue?: DeepPartial<TFieldValues>,
    isMounted?: boolean,
    isGlobal?: boolean
) =>
    | FieldPathValue<FieldValues, InternalFieldName>
    | FieldPathValues<FieldValues, InternalFieldName[]>;

type WatchName

type WatchName<TFieldValues extends FieldValues> =
    | FieldPath<TFieldValues>
    | FieldPath<TFieldValues>[]
    | readonly FieldPath<TFieldValues>[]
    | undefined;

type WatchObserver

type WatchObserver<TFieldValues extends FieldValues> = (
    value: DeepPartialSkipArrayKey<TFieldValues>,
    info: {
        name?: FieldPath<TFieldValues>;
        type?: EventType;
        values?: unknown;
    }
) => void;

type WatchProps

type WatchProps<
    TFieldName extends WatchName<TFieldValues>,
    TFieldValues extends FieldValues = FieldValues,
    TContext = any,
    TTransformedValues = TFieldValues,
    TComputeValue = undefined
> = {
    control?: Control<TFieldValues, TContext, TTransformedValues>;
    /**
     * @deprecated This prop will be renamed to `name` in the next major release.
     * Use `name` instead.
     */
    names?: TFieldName;
    name?: TFieldName;
    disabled?: boolean;
    exact?: boolean;
    defaultValue?: WatchDefaultValue<TFieldName, TFieldValues>;
    compute?: (value: WatchValue<TFieldName, TFieldValues>) => TComputeValue;
    render: (
        value: WatchRenderValue<TFieldName, TFieldValues, TComputeValue>
    ) => ReactNode | ReactNode[];
};

type WatchRenderValue

type WatchRenderValue<
    TFieldName,
    TFieldValues extends FieldValues,
    TComputeValue
> = TComputeValue extends undefined
    ? WatchValue<TFieldName, TFieldValues>
    : TComputeValue;

type WatchValue

type WatchValue<
    TFieldName,
    TFieldValues extends FieldValues = FieldValues
> = TFieldName extends readonly FieldPath<TFieldValues>[]
    ? FieldPathValues<TFieldValues, TFieldName>
    : TFieldName extends FieldPath<TFieldValues>
    ? FieldPathValue<TFieldValues, TFieldName>
    : TFieldValues;

Dependencies (0)

No dependencies.

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-hook-form.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-hook-form)

HTML

<a href="https://www.jsdocs.io/package/react-hook-form"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 second ago.
Package analyzed in 5377 ms.
Missing or incorrect documentation? Open an issue for this package.

react-hook-form

Install

Overview

Index

Functions

Interfaces

Type Aliases

Functions

function appendErrors

function Controller

Example 1

See Also

function createFormControl

function ErrorMessage

Example 1

See Also

function FieldArray

Example 1

function Form

Example 1

See Also

function FormProvider

Example 1

See Also

function FormState

function FormStateSubscribe

Deprecated

function get

function set

function useController

Example 1

See Also

function useFieldArray

Example 1

See Also

function useForm

Example 1

See Also

function useFormContext

Example 1

See Also

function useFormState

Example 1

See Also

function useWatch

function Watch

Example 1

See Also

Interfaces

interface OpaqueTypes

Example 1

interface ResolverOptions

property criteriaMode

property fields

property names

property shouldUseNativeValidation

Type Aliases

type ArrayPath

Example 1

type BatchFieldArrayUpdate

type BrowserNativeObject

type ChangeHandler

type Control

type ControllerFieldState

type ControllerProps

Returns

Example 1

type ControllerRenderProps

type CriteriaMode

type CustomElement

type DeepMap

type DeepPartial

type DeepPartialSkipArrayKey

type DeepRequired

type DefaultValues

type DelayCallback

type EmptyObject

type ErrorMessageProps

type ErrorNamespacePath

type ErrorOption