primitives
primitives copied to clipboard
Use fieldset html for RadioGroup instead of a div
Question
We are working on accessibility for our components. One Issue is that every radio group should be wrapped in a fieldset (also a legend should be present for each radio group. Would it be better to change the radioGroup component to an fieldset element instead of a regular div?
<form>
<RadioGroupRoot defaultValue="default" aria-label="View density"> // this will render as a div, use fieldset instead?
<Flex css={{ alignItems: 'center' }}>
<RadioGroupItem value="default" id="r1">
<RadioGroupIndicator />
</RadioGroupItem>
<Label htmlFor="r1">Default</Label>
</Flex>
<Flex css={{ alignItems: 'center' }}>
<RadioGroupItem value="comfortable" id="r2">
<RadioGroupIndicator />
</RadioGroupItem>
<Label htmlFor="r2">Comfortable</Label>
</Flex>
<Flex css={{ alignItems: 'center' }}>
<RadioGroupItem value="compact" id="r3">
<RadioGroupIndicator />
</RadioGroupItem>
<Label htmlFor="r3">Compact</Label>
</Flex>
</RadioGroupRoot>
</form>