useFormControl

import { useFormControl } from "reshaped";

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

If you're using Reshaped form field components, they already use 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 example, 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 the 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,
  disabled: boolean,
});