Feedback for new useControl hook in v1.0.2

[marcomuser]

Good morning! I've been recently working on an upgrade of a semi-sized form implementation to conform v1.0. First of all, I really like the direction this is taking and the overall approach of this library. Fantastic work! Having said that, I've had a bit of a struggle to wrap my head around the new unstable_useControl hook that was introduced with v1.0.2 coming from the older useInputEvent hook. In general, I'm a huge fan of explicitness over "magic" so I think the useControl hook is going in the right direction when compared to the useInputControl hook. At the same time, however, it is currently a little difficult to understand all the steps required to create an accessible hidden input that is fully integrated into the FormData API. To give you an example, I'm going to compare how I tried to integrate the Ant Design checkbox component in v0.9.x vs v1.0+:

In v0.9.x, I had something like this for the hidden input:

const control = useInputEvent({
    ref: shadowCheckboxRef,
  });

return (
  <input
        ref={shadowCheckboxRef}
        {...conform.input(fieldConfig, {
          hidden: true,
          type: 'checkbox',
          value: 'true',
        })}
        onFocus={() => antCheckboxRef.current?.focus()}
   />

This automatically handled, among other things, wiring it up correctly with the form element, aria attributes, applying custom hidden styles if necessary.

In v1.0.2, I'm doing something like this:

const control = unstable_useControl(field);

return (
  <input
        {...getInputProps(field, {
          type: 'checkbox',
          value: 'true',
        })}
        aria-hidden
        ref={control.register}
        defaultChecked={field.initialValue === 'true'}
        onFocus={() => antCheckboxRef.current?.focus()}
        className={sharedStyles.hiddenInput}
  />

As you can see, I tried to use the getInputProps fn (and its cousins) to at least wire it up with the form element. However from what I understood, these functions are no longer meant to integrate 3rd party react controls but as simplified means to integrate the standard html form input tags like <select> or <input ...>. This means, I'm now a bit on my own trying to manage all the nitty gritty details of html/aria/etc. for this hidden input. I ended up reading the source code of the old conform.input in v0.9 to figure out what it was all doing for me under the hood, e.g. applying a style prop to properly hide the input visually.

My feedback is related to the use of the new hook with the helper functions compared to the old hook and the conform helper object. I think it's gotten a little harder to integrate form inputs from a component-lib like Ant Design with v1.0.2. Of course, this is also due to my lack of knowledge of all these deeper form intricasies that one needs to get right. However, I think this was a neat part of the old conform object that it abstracted away a good part of this complexity without adding too much magic.

It could also very well be that I am fundamentally misunderstanding something. If this is the case, we can perhaps work out how this part of the documentation could be improved. :-) Cheers!