useFormGroup

Hooks

useFormGroup

Reads the nearest FormGroup's shared tone, disabled, required, and id prefix.

Signature

Lets a custom control inherit the values set by the surrounding FormGroup instead of taking the same four props at every level. It is a read-only view of that context; there is no validation, submit handling, or field registration.

SignatureTypeScript

function useFormGroup(): {
  tone?: ValidationTone;
  message?: ReactNode;
  disabled?: boolean;
  required?: boolean;
  /** Prefix for deriving stable, unique control ids. */
  idPrefix: string;
} | null;

Usage

ExampleTSX

import { useFormGroup } from "@solarius/onset";

function CustomControl({ name }: { name: string }) {
  const group = useFormGroup();
  const id = group ? `${group.idPrefix}-${name}` : name;

  return (
    <input
      id={id}
      disabled={group?.disabled}
      required={group?.required}
      aria-invalid={group?.tone === "error"}
    />
  );
}