Option to decouple the label from CheckboxButton (implicit <label> coupling)

[DarkstarXDD]

https://react-aria.adobe.com/Checkbox

With the new CheckboxField / CheckboxButton API, the label text must live inside CheckboxButton (which renders the <label> wrapping the hidden input). This makes the label and the control a single, tightly coupled unit. Is there any specific reason why an implicit labeling approach is used, over an explicit approach where the label and the hidden input are exposed as separate components linked via ids? I think it would be nice to have a supported way to render the visible label outside of CheckboxButton while keeping it correctly associated with the input.

Background / current behavior

The new API renders roughly:

CheckboxField (renders a `div`)
  CheckboxButton (renders a `<label>` with the hidden `<input>`.

Because the accessible name comes implicitly from the <label>'s text content (and click-to-toggle relies on the text being inside that <label>), the label text has to be a DOM descendant of CheckboxButton:

<CheckboxField>
  <CheckboxButton>
    <Indicator />
    Label text        {/* must be here */}
  </CheckboxButton>
  <Text slot="description" />
  <FieldError />
</CheckboxField>

What I'm trying to build

I want a consumer API like this, where the indicator is one unit and the textual parts (label, description, error) are separate units that can be rendered in a separate wrapper (CheckboxContent):

<CheckboxField>
  <CheckboxControl>      {/* CheckboxButton */}
    <CheckboxIndicator />
  </CheckboxControl>

  <CheckboxContent>
    <CheckboxLabel />
    <CheckboxDescription />
    <CheckboxError />
  </CheckboxContent>
</CheckboxField>

This simplifies the styling and allows the consumer to easily change any layout styles if needed. For example, by putting the CheckboxControl below the CheckboxContent they can render the Checkbox indicator on the right side of the content, if needed.

The problem

Since the label must stay inside CheckboxButton, I can't move CheckboxLabel into a sibling CheckboxContent without breaking things:

1. No accessible name: Because the <label>'s implicit text is now empty.
2. Click-to-toggle on the label text is lost: Because the text is no longer inside the associated <label>.

What I am thinking

What I am thinking as a RAC API is something like below, where the checkbox (the indicator) and the label are exposed as separate components.

<AriaCheckboxField>
	<AriaCheckboxIndicator /> (Renders a `<span>` with the hidden `<input>` inside it)
	<AriaCheckboxLabel /> (Renders a `<label>`. Linked to the hidden input via Ids. Like `TextField`).
</AriaCheckboxField>

I am not sure whether there are limitations on the API I have proposed, or maybe majority doesn't need the decoupling. But I still wanted to share here and see.

[devongovett]

The <CheckboxButton> represents the clickable area of the checkbox, which includes the whitespace between the indicator and the label. If you separated them, the whitespace would not be clickable, which isn't ideal.

Also, if the indicator and label were separate, it raises questions about other states as well. For example, if the user hovers over the indicator or label, do the hover states apply to both or only the one they hovered over? In a regular checkbox component you'd want it to apply to the whole clickable area, but that's not how element states usually work for independent elements.

If you do need to render a separate label for some reason, you can already do so using regular HTML, but you'll need to solve the above issues. https://stackblitz.com/edit/c9qmgpzi?file=src%2FExample.tsx

<Checkbox id="checkbox" />
<label htmlFor="checkbox">Remember me</label>