Skip to content

Commit 1386bdb

Browse files
committed
Update [Part 1 / Bindings / Checkbox inputs]
and [Part 1 / Bindings / Textarea inputs], as no explanation is needed there anymore, only a small reminder.
1 parent 385bfe1 commit 1386bdb

File tree

4 files changed

+21
-17
lines changed

4 files changed

+21
-17
lines changed

content/tutorial/01-svelte/06-bindings/03-checkbox-inputs/README.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,16 @@ Checkboxes are used for toggling between states. Instead of binding to `input.va
66

77
```svelte
88
/// file: App.svelte
9-
<input type=checkbox +++bind:+++checked={yes}>
9+
<input type=checkbox +++bind:+++checked={checked} />
1010
```
11+
12+
In cases like these, where the names match, we can also use a shorthand form:
13+
14+
```svelte
15+
/// file: App.svelte
16+
<input type=checkbox +++bind:+++checked />
17+
```
18+
19+
This applies to all bindings, not just input tags.
20+
21+
And of course if we wouldn't want to bind to `input.checked`, we could have reduced `checked={checked}` to `{checked}`. That means, you will commonly see either `{matching}` or `bind:matching` in svelte.
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script>
2-
let yes = false;
2+
let checked = false;
33
</script>
44

55
<label>
6-
<input type="checkbox" checked={yes} />
6+
<input type="checkbox" checked={checked} />
77
Yes! Send me regular email spam
88
</label>
99

10-
{#if yes}
10+
{#if checked}
1111
<p>
1212
Thank you. We will bombard your inbox and sell
1313
your personal details.
@@ -19,4 +19,4 @@
1919
</p>
2020
{/if}
2121

22-
<button disabled={!yes}>Subscribe</button>
22+
<button disabled={!checked}>Subscribe</button>
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script>
2-
let yes = false;
2+
let checked = false;
33
</script>
44

55
<label>
6-
<input type="checkbox" bind:checked={yes} />
6+
<input type="checkbox" bind:checked />
77
Yes! Send me regular email spam
88
</label>
99

10-
{#if yes}
10+
{#if checked}
1111
<p>
1212
Thank you. We will bombard your inbox and sell
1313
your personal details.
@@ -19,4 +19,4 @@
1919
</p>
2020
{/if}
2121

22-
<button disabled={!yes}>Subscribe</button>
22+
<button disabled={!checked}>Subscribe</button>

content/tutorial/01-svelte/06-bindings/07-textarea-inputs/README.md

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,9 @@ title: Textarea inputs
44

55
The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value`:
66

7-
```svelte
8-
/// file: App.svelte
9-
<textarea +++bind:value=+++{value}></textarea>
10-
```
11-
12-
In cases like these, where the names match, we can also use a shorthand form:
13-
147
```svelte
158
/// file: App.svelte
169
<textarea +++bind:value+++></textarea>
1710
```
1811

19-
This applies to all bindings, not just textareas.
12+
Remember, `bind:value` is a shorthand form for `bind:value={value}`.

0 commit comments

Comments
 (0)