feat(RadioGroup): new component

[romhml]

🔗 Linked issue

Fixes #684

❓ Type of change

Introducing a new component RadioGroup to simplify the use of Radio's in forms and fix accessibility issues.

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Oct 27, 2023 1:45pm

[romhml]

@benjamincanac it's ready to go. I'm tempted to merge the Radio and RadioGroup documentation in the docs (does not really make sense to use a Radio on it's own IMO), I kept both for now to make it easier to review.

[matteason]

Thanks for picking this up @romhml! It's looking great so far

Would it be possible to add a <legend> to the <fieldset> that wraps the radio group? The legend provides the overall label for the group. It's important for accessibility because screen readers will read the legend when focus enters the radio group, which they won't do if, for example, you just label the group with a paragraph above the fieldset

[romhml]

Thanks @matteason! I added a prop / slot to include a legend, wdyt?

[matteason]

@romhml Perfect, thank you!

[benjamincanac]

@benjamincanac it's ready to go. I'm tempted to merge the Radio and RadioGroup documentation in the docs (does not really make sense to use a Radio on it's own IMO), I kept both for now to make it easier to review.

It could make sense to merge both indeed. I'm just unsure about the RadioGroup name as it will prevent us from creating a component on top of https://headlessui.com/vue/radio-group later on.

[romhml]

@benjamincanac that's what it's called in every popular libraries I've seen and the MDN Web docs so I'd rather stick with that.

We can always alias the import from headless-ui if we want to use it don't you think? This is already the case for the select menu.

[benjamincanac]

Okay let's do this! Do you plan to merge both radio.md and radio-group.md in this PR?

[romhml]

@benjamincanac Done!

[benjamincanac]

Thanks @romhml, I've made a few changes if you want to take a look!

[benjamincanac]

I'm merging this, if you see anything that I missed let me know, we'll open a new PR 😊