How to set a RadioGroup item as checked by default?

[albertohermosillo]

Hi!

Tried to set the first item as default using both checked and data-state=checked on the RadioGroup.Item element and it marks it as selected (meaning it applies the styles I have set), but then it doesn't deselect the item when another in the group is selected.

Here's the aforementioned code:

<RadioGroup.Root class="flex flex-row gap-2 py-3">
	<RadioGroup.Item
	id="credit-card"
	value="credit-card"
	class="choicebox-item"
	data-state="checked">
	<Label.Root for="credit-card" class="choicebox-label flex flex-col text-left">
	<IconCard />
	<span class="font-semibold">Tarjeta</span>
	<span class="text-caption-md text-secondary">Crédito o débito</span>
	</Label.Root>
	</RadioGroup.Item>

<RadioGroup.Item
	id="bank-transfer"
	value="bank-transfer"
	class="choicebox-item">
	<Label.Root for="bank-transfer" class="choicebox-label flex flex-col text-left">
	<IconBank />
	<span class="font-semibold">Transferencia bancaria</span>
	<span class="text-caption-md text-secondary">SPEI</span>
	</Label.Root>
	</RadioGroup.Item>
</RadioGroup.Root>

How it's working right now:
https://invertierras-demo.vercel.app/checkout-pago

Thanks for the help!

[shyakadavis]

Hello, @albertohermosillo

You don't need to touch any states/data-* attributes for this.

Just set the value prop on Root to that of your first item.

i.e.

<RadioGroup.Root
++ value="credit-card"
class="flex flex-row gap-2 py-3">

Cheers.

[albertohermosillo]

"The value of the currently selected radio item. You can bind to this value to control the radio group's value from outside the component."

-- I read that when looking to solve it, but it never crossed my mind you could/had to set the value to the option you'd like to select by default.

Now I think I can use that to also control the visibility of the container underneath to the radio items state. Just have to figure out how, hehe.

Thanks for your help!

[shyakadavis]

BTW, bits-ui is tightly coupled with shadcn-svelte, which has better examples IMO. So, you can refer to it for polished examples.

e.g. https://www.shadcn-svelte.com/docs/components/radio-group

[albertohermosillo]

I was actually wondering a few hours ago why didn't I use shadcn-svelte instead ... and couldn't remember why.

I just remember I was struggling with the rendering of the Dialog component since it uses translate-x+y to position the dialog and it makes it look blurry.

In your opinion... Is there a good reason I should stick to bits-ui?

[shyakadavis]

it makes it look blurry.

Pre-bits-ui 1.0, and Svelte 5, this is a solution for that issue. huntabyte/shadcn-svelte#534 (comment). But I don't think this issue will exist in the Svelte 5 re-writes (which are soon to be released)

In your opinion... Is there a good reason I should stick to bits-ui?

TBH, bits-ui is very good for unfiltered control, but shadcn-svelte just provides sensible defaults. It literally does all the heavy lifting for you and gives you time to focus on customizing. 🤷

[albertohermosillo]

Oh. That's kind of the workaround I found on my own after spending 2 days, ha.

Bits UI - The headless components that power this project.

Good to know bits-ui is under shadcn-svelte. It's easier (I think) to keep it for this project since I've been already writing styles for many other components.