Combining RadioGroup with Field/Fieldset

[loicplaire]

Context

First off, thank you for building Ark UI: it's become an essential part of our Vue design system. 💜

We are building a Vue 3 design system using Ark UI.

I need RadioGroup to work with Fieldset components to provide:

• Visible label
• Support/helper text (linked via aria-describedby)
• Validation/error text (linked via aria-describedby)
• Invalid state styling (data-invalid)

I notice that Checkbox.Group has an invalid prop and a documented Group + Fieldset example, but RadioGroup.Root doesn't have this prop and there's no equivalent fieldset integration example in the RadioGroup documentation.

Approach 1: Fieldset wrapping RadioGroup

<Fieldset.Root :invalid="validationState === 'error'">
  <Fieldset.Legend>Select your pet</Fieldset.Legend>
  <Fieldset.HelperText>Choose your favourite</Fieldset.HelperText>
  
  <RadioGroup.Root>
    <RadioGroup.Item value="dogs">Dogs</RadioGroup.Item>
    <RadioGroup.Item value="cats">Cats</RadioGroup.Item>
  </RadioGroup.Root>
  
  <Fieldset.ErrorText>Please select an option</Fieldset.ErrorText>
</Fieldset.Root>

Issues

1. Broken aria-labelledby on RadioGroup.Root

The rendered HTML shows:

<fieldset aria-labelledby="fieldset::v-0::legend">
  <legend id="fieldset::v-0::legend">Select your pet</legend>
  
  <div role="radiogroup" aria-labelledby="radio-group:v-1:label">
    <!-- ❌ Points to non-existent element! -->
  </div>
</fieldset>

RadioGroup.Root auto-generates aria-labelledby="radio-group:v-1:label" expecting a RadioGroup.Label to exist, but since I'm using Fieldset.Legend instead, that ID doesn't exist in the DOM.

2. No invalid prop on RadioGroup.Root

I can't propagate invalid state to the radiogroup to style items with data-invalid.

Approach 2: Using RadioGroup.Label instead of Fieldset

<Field.Root :invalid="validationState === 'error'">
  <RadioGroup.Root>
    <RadioGroup.Label>Select your pet</RadioGroup.Label>
    <Field.HelperText>Choose your favourite</Field.HelperText>
    
    <RadioGroup.Item value="dogs">Dogs</RadioGroup.Item>
    <RadioGroup.Item value="cats">Cats</RadioGroup.Item>
    
    <Field.ErrorText>Please select an option</Field.ErrorText>
  </RadioGroup.Root>
</Field.Root>

Issues

1. aria-describedby not linked

When Field.HelperText and Field.ErrorText are placed inside RadioGroup.Root, they lose their connection to Field.Root. The automatic aria-describedby association doesn't work because Field expects these to be direct children.

2. data-invalid on wrong element

The data-invalid attribute appears on the outer Field.Root div, not on RadioGroup.Root where it's needed for styling.

Questions

1. What's the recommended pattern for using RadioGroup with accessible labelling + description + error text?

2. Why doesn't RadioGroup.Root have an invalid prop like Checkbox.Group does? Is this intentional or an oversight?

Potential Solution

First-class Fieldset integration (like Checkbox.Group)

Checkbox.Group has documented Fieldset integration with a working example. RadioGroup should have the same.

Current behaviour: When RadioGroup.Root is inside Fieldset.Root, it still generates aria-labelledby pointing to a non-existent RadioGroup.Label, ignoring the Fieldset.Legend entirely.

Suggested: When RadioGroup.Root is a descendant of Fieldset.Root:

• Don't generate aria-labelledby (inherit accessible name from <legend> implicitly)
• Inherit invalid and disabled state from the fieldset context (or add these as props)

This would give RadioGroup the same Fieldset integration that Checkbox.Group already has.

Environment

• @ark-ui/vue: 5.29.1

[segunadebayo]

Good points! I'm adding support for this in Zag.js shortly.

It'll be added to Ark pretty soon

[loicplaire]

Thanks a lot @segunadebayo, let me know if there is any way I can help.

[segunadebayo]

I just pushed a fix for this. We'll release an update shortly.