[bug]: InputGroup + FormControl breaks label focus and ARIA on input

[unav4ila8le]

Describe the bug

When using InputGroup with FormControl (Radix Slot), ARIA metadata and focus behavior break depending on where FormControl is placed:

• If FormControl wraps the InputGroup container, the generated id, aria-invalid, and aria-describedby are applied to the div[role="group"] instead of the actual <input>. Result:

  • Clicking the label does not focus the input.
  • Screen readers don’t announce the field’s error message.

• If FormControl wraps the InputGroupInput (the actual <input>), the group-level focus ring disappears because the container’s focus styles target [data-slot=input-group-control], but the Slot changes the child’s data-slot to form-control, so the :has() selector no longer matches.

I couldn’t find guidance in the InputGroup docs on using it with a form/FormControl. References: Input Group docs

Affected component/components

InputGroup, Form

How to reproduce

1. FormControl wraps the group container → label/ARIA break

<FormField
  control={form.control}
  name="password"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Password</FormLabel>
      <FormControl>
        <InputGroup>
          <InputGroupInput {...field} type="password" />
          <InputGroupAddon align="inline-end">
            <InputGroupButton>Toggle</InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

• Actual: id, aria-invalid, aria-describedby attach to div[role="group"], not the <input>. Label click doesn’t focus input; SRs don’t announce error.

2. FormControl wraps the actual input → focus ring regresses

<FormField
  control={form.control}
  name="password"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Password</FormLabel>
      <InputGroup>
        <FormControl>
          <InputGroupInput {...field} type="password" />
        </FormControl>
        <InputGroupAddon align="inline-end">
          <InputGroupButton>Toggle</InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <FormMessage />
    </FormItem>
  )}
/>

• Actual: Label/ARIA work, but the InputGroup focus styles don’t trigger because the Slot changes the child’s data-slot to form-control, so the container’s selector has-[[data-slot=input-group-control]:focus-visible] no longer matches.

Codesandbox/StackBlitz link

No response

Logs

System Info

Sequoia 15.7, Chrome, Safari

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues