binding_group is not defined

[lagden]

I am using exported snippets to create the form, but when it comes to creating the radio button with bind:group, it didn't work!!
Is there any way to make this work?

Here is the code:
https://stackblitz.com/edit/vitejs-vite-acyw8vku?file=src%2Flib%2Fsnippet.svelte,src%2FApp.svelte

[nevil2]

This works for me:

<div
	role="radiogroup"
	id={`group-${uniqueID}`}
	aria-labelledby={`label-${uniqueID}`}
>
	<label class="block" for={`group-${uniqueID}`} id={`label-${uniqueID}`}>{label}</label>
	{#each optionsarray as item}
		<input
			type="radio"
			id={slugify(item.text)}
			bind:group={userSelected}
			value={item.value}
		/>
		<label class="ml-2" for={slugify(item.text)}>{item.text}</label><br />
	{/each}
</div>

where

let userSelected = $state('')
const uniqueID = Math.floor(Math.random() * 100)
const slugify = (str = '') => str.toLowerCase().replace(/ /g, '-').replace(/\./g, '')
const optionsarray = [
  {text: 'Options1', value: 'value1'},
  {text: 'Options2', value: 'value2'},
]

[lagden]

@nevil2

Did you see the example (link)?

The problem occurs only when I try to create a snippet using bind:group.
The other types of bind:* work correctly.
And I would like to use the snippet instead of creating a component for that.

A workaround would be welcome! 😏

[nevil2]

Problem does not seem to be bind-group. The following works for me:

<script lang="ts">	
  let obj = $state({ text: 'Hello' })
</script>

{#snippet radioLocal(prop: string, label = '', opts: any[] = [])}
  <div>
      <span>{label}</span>
      {#each opts as { value, text }}
	 <label class="flex">
	    <input type="radio" bind:group={obj[prop as keyof typeof obj]} {value} />
	     <span>{text}</span>
	 </label>
      {/each}
  </div>
{/snippet}

{@render radioLocal('text', 'Text', [
  { value: 'Hello', text: 'Hello' },
  { value: 'Goodbye', text: 'Goodbye' }
])}
{obj.text}

[lagden]

Now try passing the obj as a parameter of the snippet.

[lagden]

It was fixed:
#15037