function bindings error with bind:group

[sukeshpabolu]

Describe the bug

Function bindings not working with bind:group whether it's radio buttons or components

Reproduction

repl

Logs

No response

System Info

svelte repl

Severity

annoyance

[dummdidumm]

This is expected - bind:group is a weird special case which needs static analysis for the expression to know which things relate to which group.

It is very likely possible to expose a getter/setter pair for consumption within bind:checked to achieve the same behavior, and we could probably expose it for convenience. Therefore giving this the feature request label (but not in the sense of making it work with bind:group but instead of exposing that pair).

[sukeshpabolu]

getting this error

`bind:checked` can only be used with <input type="checkbox">
https://svelte.dev/e/bind_invalid_target

[paoloricciuti]

getting this error

`bind:checked` can only be used with <input type="checkbox">
https://svelte.dev/e/bind_invalid_target

You can do this

[sukeshpabolu]

I am already doing this.
It should be mentioned in the docs that bind:group doesn't work

[Leonidaz]

This is related to using a workaround with own object with getter and setter.

I'm trying a workaround to replace bind:{get, set} for binding checkboxes with an object with a getter / setter, it works but produces a warning:

[svelte] assignment_value_stale
Assignment to `selected` property (App.svelte:46:16) will evaluate to the right-hand side,
not the value of `selected` following the assignment. This may result in unexpected behaviour.
https://svelte.dev/e/assignment_value_stale

Playground reproduction The example also has a radios binding, pls ignore.

<script>	
	let checkboxesSelected = $state([]);

	let checkboxes = {
		get selected() {
			return checkboxesSelected;
		},
		set selected(v) {
			console.log(v);
			checkboxesSelected = v;
		}	
	}
</script>

<div>
	<h3>Checkboxes</h3>
	{#each ['cookies and cream', 'mint choc chip', 'raspberry ripple'] as flavor}
		<label>
			<input
				type="checkbox"
				name="flavors"
				value={flavor}
				bind:group={checkboxes.selected}
			/>
	
			{flavor}
		</label>
	{/each}
<pre>{JSON.stringify(checkboxesSelected, null, 2)}</pre>
</div>

UPDATE

Setting the selected checkbox state to state.raw([]) (vs $state([])) gets rid of the warning.

However, outside of bind:group get/set with $state([]) works as expected, no warning: Update $state([])