react-hook-form

react-hook-form

Version 7.83.0
Published 3 days ago
1.4 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 based on useController hook to work with controlled component.

Parameter props

the path name to the form field value, and validation rules.

Returns

provide field handler functions, field and form state.

Remarks

[API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)

Example 1

function App() {
  const { control } = useForm<FormValues>({
    defaultValues: {
      test: ""
    }
  });

  return (
    <form>
      <Controller
        control={control}
        name="test"
        render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
          <>
            <input
              onChange={onChange} // send value to hook form
              onBlur={onBlur} // notify when input is touched
              value={value} // return updated value
              ref={ref} // set ref for focus management
            />
            <p>{formState.isSubmitted ? "submitted" : ""}</p>
            <p>{fieldState.isTouched ? "touched" : ""}</p>
          </>
        )}
      />
    </form>
  );
}

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 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.JSX.Element;

Form component to manage submission.

Parameter props

to setup submission detail. FormProps

Returns

form component or headless render prop.

Example 1

function App() {
  const { control, formState: { errors } } = useForm();

  return (
    <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,
    getFieldState,
    setError,
    clearErrors,
    setValue,
    setValues,
    trigger,
    formState,
    resetField,
    reset,
    resetDefaultValues,
    handleSubmit,
    unregister,
    control,
    register,
    setFocus,
    subscribe,
}: FormProviderProps<
    TFieldValues,
    TContext,
    TTransformedValues
>) => React.JSX.Element;

A provider component that propagates the useForm methods to all children components via [React Context](https://react.dev/reference/react/useContext) API. To be used with useFormContext.

Parameter props

all useForm methods

Remarks

[API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)

Example 1

function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} >
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

 function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}

function FormStateSubscribe

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

function get

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

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>;

Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
Parameter props
the path name to the form field value, and validation rules.
Returns
field properties, field and form state. UseControllerReturn
Remarks
[API](https://react-hook-form.com/docs/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)
Example 1
function Input(props) { const { field, fieldState, formState } = useController(props); return ( <div> <input {...field} placeholder={props.name} /> <p>{fieldState.isTouched && "Touched"}</p> <p>{formState.isSubmitted ? "submitted" : ""}</p> </div> ); }

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>;

A custom hook that exposes convenient methods to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc. • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn) • [Video](https://youtu.be/4MrbfGSFY2A)

Parameter props

useFieldArray props

Returns

methods - functions to manipulate with the Field Arrays (dynamic inputs) UseFieldArrayReturn

Remarks

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

Example 1

function App() {
  const { register, control, handleSubmit, reset, trigger, setError } = useForm({
    defaultValues: {
      test: []
    }
  });
  const { fields, append } = useFieldArray({
    control,
    name: "test"
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      {fields.map((item, index) => (
         <input key={item.id} {...register(`test.${index}.firstName`)}  />
      ))}
      <button type="button" onClick={() => append({ firstName: "bill" })}>
        append
      </button>
      <input type="submit" />
    </form>
  );
}

function useForm

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

Custom hook to manage the entire form.

Parameter props

form configuration and validation parameters.

Returns

methods - individual functions to manage the form state. UseFormReturn

Remarks

[API](https://react-hook-form.com/docs/useform) • [Demo](https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm) • [Video](https://www.youtube.com/watch?v=RkXv4AXXC_4)

Example 1

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>
  );
}

function useFormContext

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

This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with FormProvider.

Returns

return all useForm methods

Remarks

[API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)

Example 1

function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} >
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

 function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}

function useFormState

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

Subscribes to each form state and isolates re-renders at the custom hook level. It has its own scope for form state subscriptions, so it will not affect other useFormState or useForm instances. Using this hook can reduce the re-render impact on large and complex form applications.

Parameter props

Include options to specify fields to subscribe to. UseFormStateReturn

Remarks

[API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)

Example 1

function App() {
  const { register, handleSubmit, control } = useForm({
    defaultValues: {
    firstName: "firstName"
  }});
  const { dirtyFields } = useFormState({
    control
  });
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      {dirtyFields.firstName && <p>Field is dirty.</p>}
      <input type="submit" />
    </form>
  );
}

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>;
};

Subscribes to all form value changes and re-renders at the hook level.
Parameter props
DefaultValue, disabled subscription, and exact name matching.
Remarks
[API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
Example 1
const { control } = useForm(); const values = useWatch({ control, defaultValue: { name: "data" }, exact: false, })
Custom hook to subscribe to field changes and isolate re-rendering at the component level.
Parameter props
DefaultValue, disabled subscription, and exact name matching.
Remarks
[API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
Example 1
const { control } = useForm(); const values = useWatch({ control, name: "fieldA", defaultValue: "default value", exact: false, })
Custom hook to subscribe to field changes and use a compute function to produce state updates.
Parameter props
DefaultValue, disabled subscription, and exact name matching.
Remarks
[API](https://react-hook-form.com/docs/usewatch)
Example 1
const { control } = useForm(); const values = useWatch({ control, compute: (formValues) => formValues.fieldA })
Custom hook to subscribe to field changes and use a compute function to produce state updates.
Parameter props
DefaultValue, disabled subscription, and exact name matching.
Remarks
[API](https://react-hook-form.com/docs/usewatch)
Example 1
const { control } = useForm(); const values = useWatch({ control, name: "fieldA", defaultValue: "default value", exact: false, compute: (fieldValue) => fieldValue === "data" ? fieldValue : null, })
Custom hook to subscribe to field changes and isolate re-rendering at the component level.
Parameter props
DefaultValue, disabled subscription, and exact name matching.
Remarks
[API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
Example 1
const { control } = useForm(); const values = useWatch({ control, name: ["fieldA", "fieldB"], defaultValue: { fieldA: "data", fieldB: "data" }, exact: false, })

Custom hook to subscribe to field changes and use a compute function to produce state updates.

Parameter props

DefaultValue, disabled subscription, and exact name matching.

Remarks

[API](https://react-hook-form.com/docs/usewatch)

Example 1

const { control } = useForm();
const values = useWatch({
  control,
  name: ["fieldA", "fieldB"],
  defaultValue: {
    fieldA: "data",
    fieldB: 0
  },
  compute: ([fieldAValue, fieldBValue]) => fieldB === 2 ? fieldA : null,
  exact: false,
})

Custom hook to subscribe to field changes and isolate re-rendering at the component level.
Remarks
[API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
Example 1
// Can skip passing down the control into useWatch if the form is wrapped with FormProvider const values = useWatch()

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[];

Watch component that subscribes to form field changes and re-renders when watched fields update.
Parameter control
The form control object from useForm
Parameter name
Can be field name, array of field names, or undefined to watch the entire form
Parameter disabled
Disable subscription
Parameter exact
Whether to watch exact field names or not
Parameter defaultValue
The default value to use if the field is not yet set
Parameter compute
Function to compute derived values from watched fields
Parameter render
The function that receives watched values and returns ReactNode
Returns
The result of calling render function with watched values
Example 1
The Watch component only re-render when the values of foo, bar, and baz.qux change. The types of foo, bar, and baz.qux are precisely inferred.
const { control } = useForm(); <Watch control={control} names={['foo', 'bar', 'baz.qux']} render={([foo, bar, baz_qux]) => <div>{foo}{bar}{baz_qux}</div>} />

Interfaces

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 any ? 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;
        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: FieldName<any> }) => 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
    ? 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
    ? 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
    ? T
    : T extends ReadonlyArray<any>
    ? {
          [K in keyof T]: DeepPartialSkipArrayKey<T[K]>;
      }
    : {
          [K in keyof T]?: DeepPartialSkipArrayKey<T[K]>;
      };

type DeepRequired

type DeepRequired<T> = T extends BrowserNativeObject | Blob
    ? 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 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;
    } & RegisterOptions;
};

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?: GlobalError;
};

type FieldErrorsImpl

type FieldErrorsImpl<T extends FieldValues = FieldValues> = {
    [K in keyof T]?: T[K] extends BrowserNativeObject | Blob
        ? 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 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> = {
    isDirty: boolean;
    isLoading: boolean;
    isSubmitted: boolean;
    isSubmitSuccessful: boolean;
    isSubmitting: boolean;
    isValidating: boolean;
    isValid: boolean;
    disabled: boolean;
    submitCount: number;
    defaultValues?: undefined | Readonly<DeepPartial<TFieldValues>>;
    dirtyFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
    touchedFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
    validatingFields: Partial<Readonly<FieldNamesMarkedBoolean<TFieldValues>>>;
    errors: FieldErrors<TFieldValues>;
    isReady: boolean;
};

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
> = UseFormStateProps<TFieldValues, TTransformedValues> & {
    render: (values: UseFormStateReturn<TFieldValues>) => ReactNode;
};

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 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>,
    any[] | 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 Path

type Path<T> = T extends any ? 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> = (
    data: T,
    event?: React.BaseSyntheticEvent
) => unknown | Promise<unknown>;

type TriggerConfig

type TriggerConfig = Partial<{
    shouldFocus: 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>[]
        | `root.${string}`
        | 'root'
        | 'form'
        | `form.${string}`
) => 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 UseFormGetFieldState

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

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
> = (
    onValid: SubmitHandler<TTransformedValues>,
    onInvalid?: SubmitErrorHandler<TFieldValues>
) => (e?: React.BaseSyntheticEvent) => Promise<void>;

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>;
    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>
        | `root.${string}`
        | 'root'
        | 'form'
        | `form.${string}`,
    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.
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 (1)

react

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 2 days ago.
Package analyzed in 5809 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

Parameter props

Returns

Remarks

Example 1

function createFormControl

function FieldArray

Example 1

function Form

Parameter props

Returns

Example 1

function FormProvider

Parameter props

Remarks

Example 1

function FormStateSubscribe

function get

function set

function useController

Parameter props

Returns

Remarks

Example 1

function useFieldArray

Parameter props

Returns

Remarks

Example 1

function useForm

Parameter props

Returns

Remarks

Example 1

function useFormContext

Returns

Remarks

Example 1

function useFormState

Parameter props

Remarks

Example 1

function useWatch

Parameter props

Remarks

Example 1

Parameter props

Remarks

Example 1

Parameter props

Remarks

Example 1

Parameter props

Remarks

Example 1

Parameter props

Remarks

Example 1

Parameter props

Remarks

Example 1

Remarks

Example 1

function Watch

Parameter control

Parameter name

Parameter disabled

Parameter exact

Parameter defaultValue

Parameter compute

Parameter render