docs: add shared state example for bind:group

sveltejs · Jan 6, 2025 · 0ee5c83 · 0ee5c83
1 parent ed26c3f
commit 0ee5c83
Showing 1 changed file with 46 additions and 7 deletions.
diff --git a/documentation/docs/03-template-syntax/11-bind.md b/documentation/docs/03-template-syntax/11-bind.md
@@ -130,19 +130,58 @@ Inputs that work together can use `bind:group`.
 </script>
 
 <!-- grouped radio inputs are mutually exclusive -->
-<input type="radio" bind:group={tortilla} value="Plain" />
-<input type="radio" bind:group={tortilla} value="Whole wheat" />
-<input type="radio" bind:group={tortilla} value="Spinach" />
+<label><input type="radio" bind:group={tortilla} value="Plain" />Plain</label>
+<label><input type="radio" bind:group={tortilla} value="Whole wheat" />Whole wheat</label>
+<label><input type="radio" bind:group={tortilla} value="Spinach" />Spinach</label>
 
 <!-- grouped checkbox inputs populate an array -->
-<input type="checkbox" bind:group={fillings} value="Rice" />
-<input type="checkbox" bind:group={fillings} value="Beans" />
-<input type="checkbox" bind:group={fillings} value="Cheese" />
-<input type="checkbox" bind:group={fillings} value="Guac (extra)" />
+<label><input type="checkbox" bind:group={fillings} value="Rice" /> Rice</label>
+<label><input type="checkbox" bind:group={fillings} value="Beans" />Beans</label>
+<label><input type="checkbox" bind:group={fillings} value="Cheese" /> Cheese</label>
+<label><input type="checkbox" bind:group={fillings} value="Guac (extra)" />Guac</label>
 ```
 
 > [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.
 
+`bind:group` can be used with component props with help of [bind-property](#bind:property-for-components):
+
+```javascript
+// sharedState.svelte.js
+export const tortilla = $state({selectedValue: ""});
+export const fillings = $state({selectedValues: []});
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+	import { tortilla, fillings } from './sharedState.svelte.js';
+	import Selection from './Selection.svelte';
+</script>
+
+<Selection bind:tortilla={tortilla.selectedValue} bind:fillings={fillings.selectedValues} />
+```
+
+```svelte
+<!-- Selection.svelte -->
+<script>
+	let { tortilla = $bindable(), fillings = $bindable() } = $props();
+</script>
+
+<!-- grouped radio inputs are mutually exclusive -->
+<label><input type="radio" bind:group={tortilla} value="Plain" />Plain</label>
+<label><input type="radio" bind:group={tortilla} value="Whole wheat" />Whole wheat</label>
+<label><input type="radio" bind:group={tortilla} value="Spinach" />Spinach</label>
+
+<!-- grouped checkbox inputs populate an array -->
+<label><input type="checkbox" bind:group={fillings} value="Rice" /> Rice</label>
+<label><input type="checkbox" bind:group={fillings} value="Beans" />Beans</label>
+<label><input type="checkbox" bind:group={fillings} value="Cheese" /> Cheese</label>
+<label><input type="checkbox" bind:group={fillings} value="Guac (extra)" />Guac</label>
+```
+
+> [!NOTE] `bind:group` only works if the inputs are in the same Svelte component, you can't pass down a single $state to multiple components (with different values).
+
+
 ## `<input bind:files>`
 
 On `<input>` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). When you want to update the files programmatically, you always need to use a `FileList` object. Currently `FileList` objects cannot be constructed directly, so you need to create a new [`DataTransfer`](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object and get `files` from there.