InputGroup + FormControl: ARIA props attach to group container instead of input; label focus and SR errors break. Wrapping input fixes ARIA but loses focus ring. Docs lack Form usage.

[unav4ila8le]

Using the new component InputGroup with FormControl (Radix Slot), if FormControl wraps the group container, the generated id, aria-invalid, and aria-describedby are applied to the outer div[role="group"] rather than the actual .

• Clicking the label no longer focuses the input.
• Screen readers don’t announce the error message for that field.

If FormControl is moved to wrap the actual InputGroupInput, the focus ring regresses because the container’s :has() selectors target [data-slot=input-group-control], but the Slot changes the child’s data-slot to form-control, so the selectors no longer match.
I couldn’t find guidance in the InputGroup docs about usage with Form/FormControl. Docs: Input Group

1. Broken label/ARIA when FormControl wraps the group container:

<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 end up on div[role="group"]. Label click doesn’t focus input; SRs don’t announce error.

2. Focus ring regresses when FormControl wraps the input:

<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: ARIA target is correct (label focuses input; SR errors work), but the group-level focus ring disappears because the :has([[data-slot=input-group-control]:focus-visible]) selector no longer matches after the Slot changes the child’s data-slot to form-control.

Any idea? Should I submit a new issue as a bug, or is this on purpose and I am not seeing it?