API Reference / @gtkx/forms / useFieldArray

Function: useFieldArray()

useFieldArray<TFieldValues, TFieldArrayName, TKeyName, TTransformedValues>(props): UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>

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

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 • Video

Type Parameters

TFieldValues

TFieldValues extends FieldValues = FieldValues

TFieldArrayName

TFieldArrayName extends string = FieldArrayPath<TFieldValues>

TKeyName

TKeyName extends string = "id"

TTransformedValues

TTransformedValues = TFieldValues

Parameters

props

UseFieldArrayProps<TFieldValues, TFieldArrayName, TKeyName, TTransformedValues>

useFieldArray props

Returns

UseFieldArrayReturn<TFieldValues, TFieldArrayName, TKeyName>

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

Remarks

API • Demo

Example

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