Function useFormField

apps/ui/src/components/ui/form.tsx:45–72

()

};

const useFormField = () => {
  const fieldContext = React.useContext(FormFieldContext);
  const itemContext = React.useContext(FormItemContext);
  const { getFieldState } = useFormContext();
  const formState = useFormState({ name: fieldContext.name });

  // Both contexts default to {} (a truthy value), so guard on the field that
  // each provider actually supplies, and do it before any value is consumed.
  if (!fieldContext.name) {
    throw new Error("useFormField should be used within <FormField>");
  }

  if (!itemContext.id) {
    throw new Error("useFormField should be used within <FormItem>");
  }

  const fieldState = getFieldState(fieldContext.name, formState);
  const { id } = itemContext;

  return {
    id,
    name: fieldContext.name,
    formItemId: `${id}-form-item`,
    formDescriptionId: `${id}-form-item-description`,
    formMessageId: `${id}-form-item-message`,
    ...fieldState
  };
};

type FormItemContextValue = {
  id: string;