Generic Context Provider for different form field types

[universse]

For TextField component, a value can be passed to TextFieldContextProvider which is then shared with all the child TextField components. It works similarly for some other form field components. So is there a way to have a more generic ContextProvider that can share the value to all the child field components?

TextField example:

function FieldGroup({ title, children, errorMessage }: FieldGroupProps) {
  let errorId = useId();
  return (
    <fieldset>
      <legend>{title}</legend>
      <TextFieldContext.Provider
        value={{
          isInvalid: !!errorMessage,
          'aria-describedby': errorMessage ? errorId : undefined
        }}
      >
        {children}
      </TextFieldContext.Provider>
      {errorMessage && (
        <small id={errorId} className="invalid">{errorMessage}</small>
      )}
    </fieldset>
  );
}

<FieldGroup title="Account details" errorMessage="Invalid account details.">
  <MyTextField label="Name" />
  <MyTextField label="Email" />
</FieldGroup>

How I imagine it could work:

function FieldGroup({ title, children, errorMessage }: FieldGroupProps) {
  let errorId = useId();
  return (
    <fieldset>
      <legend>{title}</legend>
      <FieldContext.Provider
        value={{
          isInvalid: !!errorMessage,
          'aria-describedby': errorMessage ? errorId : undefined
        }}
      >
        {children}
      </FieldContext.Provider>
      {errorMessage && (
        <small id={errorId} className="invalid">{errorMessage}</small>
      )}
    </fieldset>
  );
}

<FieldGroup title="Account details" errorMessage="Invalid account details.">
  <MyTextField label="Name" />
  <MyTextField label="Email" />
  <MyNumberField label="Age" />
</FieldGroup>

I guess what I'm looking for is a component that can replace <fieldset>. I took a look at the Group component but the value passed to context provider is only passed to the group element and not the individual input elements. It also behaves differently from <fieldset>/CheckboxGroup e.g. passing isDisabled to Group does not disable the child fields.

Would be great also to have the group error message to be more composable and work with Form component validation.

[predaytor]

This would be really useful, it fits right in with the current way of composition via Context. I think we have recreate our own <fieldset/> with the necessary context providers to propagate the state.

[snowystinger]

Sorry for the delayed response. This seems reasonable. We have a similar context for React Spectrum, this would be a little more specific, but the general gist is the same. Feel like making an RFC out of this for discussion? https://react-spectrum.adobe.com/contribute.html#feature-requests