Form Field Context

Shared React context that propagates FormField state (hasError, disabled, id, name) to child input components. Automatically installed with FormField and consumed by all input components.

Installation

bunx @happlyui/cli@latest add form-field-context

Usage

import { useFormField } from "@/lib/form-field-context"

function MyCustomInput({ hasError, ...props }) {
  const formField = useFormField();
  const resolvedHasError = hasError ?? formField.hasError;

  return <input aria-invalid={resolvedHasError || undefined} {...props} />;
}

API Reference

useFormField

Hook to access FormField context values. Returns default values when used outside a FormField.

Prop	Type	Default	Description

FormFieldContext

The React context object. Use FormFieldContext.Provider to wrap custom form field implementations.

Prop	Type	Default	Description
`hasError`	`boolean`	`false`	Whether the field has a validation error.
`disabled`	`boolean`	`false`	Whether the field is disabled.
`id`	`string`	-	The field ID, used for label/input association.
`name`	`string`	-	The field name, used for react-hook-form integration.