Skip to main content

useField

React custom hook for subscribing to the value and validation state of a form field and getting methods to programmatically set the value.

To connect <input> elements to form state, useHtmlField is probably more useful; useField is better for custom field components that aren't based upon <input>s.

For array fields, use useArrayField.

import { useField } from '@jcoreio/zod-forms'
export function useField(path): UseFieldProps`

path may be a FieldPath. If you cast to TypedUseField, or use the useField returned by createZodForm, path may be a pathstring or path array.

The full method signature (not shown here) extracts the type of the subschema at the given path, and should produce a TS error if the path is invalid or doesn't exist in the schema.

Returns UseFieldProps

An object containing the following properties. Causes a rerender when any of these properties changes.

  • value - the parsed value of the field, or undefined if invalid
  • rawValue - the raw value of the field
  • initialValue - the parsed initial value of the field, or undefined if invalid/uninitialized
  • rawInitialValue - the raw initial value of the field
  • error - the validation error message, if any
  • dirty - whether the value is not equal to initialValue
  • pristine - opposite of dirty
  • valid - whether the rawValue is valid
  • invalid - oppposite of valid
  • touched - whether the field has been blurred or the form submitted
  • visited - whether the field has been focused
  • setMeta - method to set the FieldMeta for this field
  • setRawValue - method to set the raw value for this field
  • setValue - method to set the value for this field