useFormControl

import { useFormControl } from "@uicapsule/components";

When using FormControl utility – you would usually pass properties to it that should also affect your form field. For instance, passing the disabled flag to FormControl should also change the field color and prevent the user from interacting with it.

If you're using UIC form field components – they are already using useFormControl inside them, so this logic is supported automatically. However, if you're building a custom input component, useFormControl is where you can get data for inheriting the FormControl properties values.

For instance, you can create a custom input component with the hook:

function CustomInputComponent() {
  const { disabled } = useFormControl();

  return <input type="text" disabled={disabled} />;
}

Then it will automatically get access to values used in the FormControl your input is wrapped with:

<FormControl disabled>
  <FormControl.Label>Custom field:</FormControl.Label>
  <CustomInputComponent />
</FormControl>

() => ({
  attributes: object,
  required: boolean,
  hasError: boolean,
  hasSuccess: boolean,
  disabled: boolean,
});