Skip to content

Commit 8e16c77

Browse files
authored
docs: improve bind:group example (#15968)
1 parent db7b25b commit 8e16c77

File tree

1 file changed

+10
-9
lines changed

1 file changed

+10
-9
lines changed

documentation/docs/03-template-syntax/12-bind.md

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -142,26 +142,27 @@ Checkboxes can be in an [indeterminate](https://developer.mozilla.org/en-US/docs
142142

143143
## `<input bind:group>`
144144

145-
Inputs that work together can use `bind:group`.
145+
Inputs that work together can use `bind:group` ([demo](/playground/untitled#H4sIAAAAAAAAE62T32_TMBDH_5XDQkpbrct7SCMGEvCEECDxsO7BSW6L2c227EvbKOv_jp0f6jYhQKJv5_P3PvdL1wstH1Bk4hMSGdgbRzUssFaM9VJciFtF6EV23QvubNRFR_BPUVfWXvodEkdfKT3-zl8Zzag5YETuK6csF1u9ZUIGNo4VkYQNvPYsGRfJF5JKJ8s3QRJE6WoFb2Nq6K-ck13u2Sl9Vxxhlc6QUBIFnz9Brm9ifJ6esun81XoNd860FmtwslYGlLYte5AO4aHlVhJ1gIeKWq92COt1iMtJlkhFPkgh1rHZiiF6K6BUus4G5KafGznCTlIbVUMfQZUWMJh5OrL-C_qjMYSwb1DyiH7iOEuCb1ZpWTUjfHqcwC_GWDVY3ZfmME_SGttSmD9IHaYatvWHIc6xLyqad3mq6KuqcCwnWn9p8p-p71BqP2IH81zc9w2in-od7XORP7ayCpd5YCeXI_-p59mObPF9WmwGpx3nqS2Gzw8TO3zOaS5_GqUXyQUkS3h8hOSz0ZhMESHGc0c4Hm3MAn00t1wrb0l2GZRkqvt4sXwczm6Qh8vnUJzI2LV4vAkvqWgfehTZrSSPx19WiVfFfAQAAA==)):
146146

147147
```svelte
148+
<!--- file: BurritoChooser.svelte --->
148149
<script>
149150
let tortilla = $state('Plain');
150151
151-
/** @type {Array<string>} */
152+
/** @type {string[]} */
152153
let fillings = $state([]);
153154
</script>
154155
155156
<!-- grouped radio inputs are mutually exclusive -->
156-
<input type="radio" bind:group={tortilla} value="Plain" />
157-
<input type="radio" bind:group={tortilla} value="Whole wheat" />
158-
<input type="radio" bind:group={tortilla} value="Spinach" />
157+
<label><input type="radio" bind:group={tortilla} value="Plain" /> Plain</label>
158+
<label><input type="radio" bind:group={tortilla} value="Whole wheat" /> Whole wheat</label>
159+
<label><input type="radio" bind:group={tortilla} value="Spinach" /> Spinach</label>
159160
160161
<!-- grouped checkbox inputs populate an array -->
161-
<input type="checkbox" bind:group={fillings} value="Rice" />
162-
<input type="checkbox" bind:group={fillings} value="Beans" />
163-
<input type="checkbox" bind:group={fillings} value="Cheese" />
164-
<input type="checkbox" bind:group={fillings} value="Guac (extra)" />
162+
<label><input type="checkbox" bind:group={fillings} value="Rice" /> Rice</label>
163+
<label><input type="checkbox" bind:group={fillings} value="Beans" /> Beans</label>
164+
<label><input type="checkbox" bind:group={fillings} value="Cheese" /> Cheese</label>
165+
<label><input type="checkbox" bind:group={fillings} value="Guac (extra)" /> Guac (extra)</label>
165166
```
166167

167168
> [!NOTE] `bind:group` only works if the inputs are in the same Svelte component.

0 commit comments

Comments
 (0)