useFormState returns errors and isValid for the entire form

[Felixmurithi]

Is there a way to get isValid and errors in each form component I use useFormState.

[Pleo2]

isValid is intentionally form-wide: it answers whether the entire form passes its validation rules/schema. There is no independent per-component isValid unless you define what fields belong to that component.

For a single field, use useController and read its fieldState:

const {
  field,
  fieldState: { invalid, error, isDirty, isTouched },
} = useController({
  control,
  name: 'email',
})

If the component is not controlling the input, subscribe narrowly with useFormState and inspect that field:

const formState = useFormState({
  control,
  name: 'email',
  exact: true,
})

const { invalid, error } = getFieldState(
  'email',
  formState,
)

For a section containing multiple fields, subscribe to that explicit list:

const names = ['address.street', 'address.city'] as const
const { errors } = useFormState({ control, name: names, exact: true })

Then derive section validity from those paths, or call trigger(names) when you need to validate that section. Be aware that cross-field/schema refinements may attach an error outside the section, which is another reason RHF cannot provide a universal “component validity” flag.

The name option narrows what causes the component to re-render; it does not redefine the meaning of the global isValid property.

Docs: https://react-hook-form.com/docs/useformstate and https://react-hook-form.com/docs/useform/getfieldstate