I'm creating a radio button component but I have some issue with bind:group.when I'm selecting a button, both graphic updates to the checked state.
I think it has to do with the checked variable, If I use the default appearence the buttons are selected one at time.
+Page.svelte
<RadioButton name="database" value="db1" bind:checked={radioValue}/><RadioButton name="database" value="db2" bind:checked={radioValue}/>RadioButton.svelte
<script> import { toKebabCase } from "$lib/utils.js"; import Icon from "$lib/components/Icon.svelte"; export let checked; export let classNames = ""; export let name = ''; export let value = '';</script><label for={toKebabCase(value)} class="relative flex flex-row items-center {classNames}"><input type="radio" id="{toKebabCase(value)}" name={name} value="{value}" class="flex shrink-0 h-5 w-5 mr-2 appearance-none" bind:group={checked} /><span class="absolute cursor-pointer"> {#if checked}<Icon type="radioButtonChecked" classNames="h-6 w-6 fill-gs-teal" /> {:else}<Icon type="radioButton" classNames="h-6 w-6 fill-white" /> {/if}</span><slot /></label>