Fix radio checked attribute

[andrewrisse]

📑 Description

The Radio component does not check a radio button input by default when passing the checked prop. This can be seen in the docs [here])(https://flowbite-svelte.com/docs/components/forms#Radio_buttons). The Radio component has checked set to true, but it is not checked.

A radio group is defined by giving each of radio buttons in the group the same name. There is no "group" attribute for input elements. bind:group was causing the checked attribute not to work.

Status

• [ ] Not Completed
• [X] Completed

✅ Checks

• [ X ] My pull request adheres to the code style of this project
• [ ] My code requires changes to the documentation
• [ X ] I have updated the documentation as required
• [ ] I have checked the page with https://validator.unl.edu/
• [ ] All the tests have passed (could not get tests to run and didn't have time to mess with the config)
• [ ] My pull request is based on the latest commit (not the npm version).

ℹ Additional Information

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Improved interaction model for radio buttons, allowing for more flexible state management within groups.

• Bug Fixes

  • Adjusted radio button functionality to enhance user input experience and state handling.

[vercel[bot]]

@andrewrisse is attempting to deploy a commit to the Themesberg Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

Walkthrough

The recent modification to the Radio.svelte component involves removing the bind:group={group} directive from the radio button input. This change impacts how the radio button interacts with its group and affects its state management, resulting in the radio button no longer synchronizing its selected value automatically. This shift could alter the user experience during option selection within the group.

Changes

Files	Change Summary
src/lib/forms/Radio.svelte	Removed the bind:group={group} directive from the radio input, altering state management and selection behavior.

Poem

In a meadow soft and bright,
A radio button took to flight.
With a hop and a skip, it danced away,
No longer bound, it chose its way.
Hooray for change, let's celebrate,
A new selection, oh, how great! 🐇✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

[mattdeboard]

For anyone else thumbing through pull requests and being nosy, here's a screenshot of the radio buttons that @andrewrisse referred to not working as intended in the docs . "Checked state" radio button should be checked since the checked prop is true.

[mattdeboard]

@andrewrisse Is there a workaround until this patch gets merged & released?

[andrewrisse]

@andrewrisse Is there a workaround until this patch gets merged & released?

If you need this component, I recommend copying the Radio.svelte code into your own file then remove the: bind:group={group} prop being passed to the input. It's a simple component, so it's easy enough to just swap it back out with the flowbite-svelte library component once it is fixed.

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
flowbite-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 24, 2024 4:11pm

[shinokada]

It is working on the site.

[mattdeboard]

So it is, interesting. Wonder if some underlying issue was resolved in svelte/kit et al.