Svelte: `bind:group` does not work with nested components

[imbolc]

I'm trying to bind a store variable to group of checkboxes and it works till I move checkbox into a separate component, after that only one checkbox can be chosen at a time, here's an example from repl: https://gist.github.com/imbolc/e29205d6901d135c8c1bd8c3eec26d67

[Rich-Harris]

Yeah, this won't work as things currently stand — the group has to be within the component.

I suppose we could have a global Map of binding groups, though I'm not sure what the change notification looks like (for components other than the one with the element from which a change originated). This could be something to ponder post-3.0.

[bestguy]

Is there a workaround for this in v3? It makes components that use a checkbox pretty difficult/confusing to use if you need to use groups.

https://svelte.dev/repl/1565708677134e418e256234984d90ef?version=3.12.1

[NikolayMakhonin]

Solution of this problem but without keep order of the selected items:

https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1

[NikolayMakhonin]

Universal toggle component:

https://svelte.dev/repl/b63c813830274248a8fee5ecc667b15c?version=3.12.1

[boleeluchshiy]

I know, this is obvious, but still. For those, who run into the same problem: It would be sufficient to make separate component for the group of checkboxes, e.g. CheckboxGroup, which you can bind to a group <CheckboxGroup { checkboxes } bind:group/>.

See the example and learn some russian words :) https://svelte.dev/repl/faabda4cabd544bd858a8a8abd0095f5?version=3.12.1

[kevmodrome]

This came up in the Discord today, what would be needed to make this work? Intuitively I feel like this should work out of the box.

[tamasPetki]

What if you try like this?:

https://svelte.dev/repl/42ff2937ebe345cc997fd080c347567c?version=3.20.1