useFormFields

This hook allows you to retrieve the state of each fields of a form.

Import

import { useFormFields } from "@formiz/core";

Basic usage

const fields = useFormFields();

Usage at top level

To use this hook at the top level, you need to connect it to the form.

const form = useForm();
const fields = useFormFields({
  connect: form,
});
 
<Formiz form={form}>{/* your fields here */}</Formiz>;

Then, you'll be able to access to your fields states.

Get only some fields

Allows you to filter your fields by name(s) that you want to fetch.

const someFields = useFormFields({ fields: ["firstName", "lastName"] });

You can use nested.field or array[0].nested syntaxes.

const someFields = useFormFields({
  fields: [
    "personalInfo.firstName",
    "personalInfo.lastName",
    "books[0].name",
    "books[0].editor",
  ],
});

Get only some state

Allows you to filter which states fields by state.

const fieldsIsValid = useFormFields({ selector: (field) => field.isValid });
 
const fieldsValues = useFormFields({ selector: (field) => field.value });

You can also use shortcuts to access fields state

const fieldsIsValid = useFormFields({ selector: "isValid" });
// same as useFormFields({ selector: (field) => field.isValid });
 
const fieldsValues = useFormFields({ selector: "value" });
// same as useFormFields({ selector: (field) => field.value });

This way, you can avoid re-rendering the form if a state you don't need updates, and lessen the strain on the page.

const fieldsCustom = useFormFields({
  selector: (field) =>
    field.isSubmitted && field.value === "julie" ? "OK" : "KO",
});

useFormContext()useField()