diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte b/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
index 3b1141c41f..a5919d9799 100644
--- a/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/05-textarea-inputs/app-a/App.svelte
@@ -1,12 +1,12 @@
 <script>
 	import marked from 'marked';
-	let markdown = `Some words are *italic*, some are **bold**`;
+	let value = `Some words are *italic*, some are **bold**`;
 </script>
 
 <style>
 	textarea { width: 100%; height: 200px; }
 </style>
 
-<textarea value={markdown}></textarea>
+<textarea value={value}></textarea>
 
-{@html marked(markdown)}
\ No newline at end of file
+{@html marked(value)}
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
index 0ce50256ca..be338bf47f 100644
--- a/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/05-textarea-inputs/app-b/App.svelte
@@ -1,12 +1,12 @@
 <script>
 	import marked from 'marked';
-	let markdown = `Some words are *italic*, some are **bold**`;
+	let value = `Some words are *italic*, some are **bold**`;
 </script>
 
 <style>
 	textarea { width: 100%; height: 200px; }
 </style>
 
-<textarea bind:value={markdown}></textarea>
+<textarea bind:value></textarea>
 
-{@html marked(markdown)}
\ No newline at end of file
+{@html marked(value)}
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/05-textarea-inputs/text.md b/site/content/tutorial/06-bindings/05-textarea-inputs/text.md
index 47f5f298a9..42763200c7 100644
--- a/site/content/tutorial/06-bindings/05-textarea-inputs/text.md
+++ b/site/content/tutorial/06-bindings/05-textarea-inputs/text.md
@@ -5,5 +5,13 @@ title: Textarea inputs
 The `<textarea>` element behaves similarly to a text input in Svelte — use `bind:value`:
 
 ```html
-<textarea bind:value={markdown}></textarea>
+<textarea bind:value={value}></textarea>
 ```
+
+In cases like these, where the names match, we can also use a shorthand form:
+
+```html
+<textarea bind:value></textarea>
+```
+
+This applies to all bindings, not just textareas.
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/12-component-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/12-component-bindings/app-a/App.svelte
new file mode 100644
index 0000000000..4eba735de6
--- /dev/null
+++ b/site/content/tutorial/06-bindings/12-component-bindings/app-a/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Keypad from './Keypad.svelte';
+
+	let pin;
+	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
+
+	function handleSubmit() {
+		alert(`submitted ${pin}`);
+	}
+</script>
+
+<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
+
+<Keypad on:submit={handleSubmit}/>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/12-component-bindings/app-a/Keypad.svelte b/site/content/tutorial/06-bindings/12-component-bindings/app-a/Keypad.svelte
new file mode 100644
index 0000000000..c457a15cb5
--- /dev/null
+++ b/site/content/tutorial/06-bindings/12-component-bindings/app-a/Keypad.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let value = '';
+
+	const dispatch = createEventDispatcher();
+
+	const select = num => () => value += num;
+	const clear  = () => value = '';
+	const submit = () => dispatch('submit');
+</script>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
+
+<div class="keypad">
+	<button on:click={select(1)}>1</button>
+	<button on:click={select(2)}>2</button>
+	<button on:click={select(3)}>3</button>
+	<button on:click={select(4)}>4</button>
+	<button on:click={select(5)}>5</button>
+	<button on:click={select(6)}>6</button>
+	<button on:click={select(7)}>7</button>
+	<button on:click={select(8)}>8</button>
+	<button on:click={select(9)}>9</button>
+
+	<button disabled={!value} on:click={clear}>clear</button>
+	<button on:click={select(0)}>0</button>
+	<button disabled={!value} on:click={submit}>submit</button>
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/12-component-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/12-component-bindings/app-b/App.svelte
new file mode 100644
index 0000000000..67fec4a5ad
--- /dev/null
+++ b/site/content/tutorial/06-bindings/12-component-bindings/app-b/App.svelte
@@ -0,0 +1,14 @@
+<script>
+	import Keypad from './Keypad.svelte';
+
+	let pin;
+	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
+
+	function handleSubmit() {
+		alert(`submitted ${pin}`);
+	}
+</script>
+
+<h1 style="color: {pin ? '#333' : '#ccc'}">{view}</h1>
+
+<Keypad bind:value={pin} on:submit={handleSubmit}/>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/12-component-bindings/app-b/Keypad.svelte b/site/content/tutorial/06-bindings/12-component-bindings/app-b/Keypad.svelte
new file mode 100644
index 0000000000..c457a15cb5
--- /dev/null
+++ b/site/content/tutorial/06-bindings/12-component-bindings/app-b/Keypad.svelte
@@ -0,0 +1,40 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let value = '';
+
+	const dispatch = createEventDispatcher();
+
+	const select = num => () => value += num;
+	const clear  = () => value = '';
+	const submit = () => dispatch('submit');
+</script>
+
+<style>
+	.keypad {
+		display: grid;
+		grid-template-columns: repeat(3, 5em);
+		grid-template-rows: repeat(4, 3em);
+		grid-gap: 0.5em
+	}
+
+	button {
+		margin: 0
+	}
+</style>
+
+<div class="keypad">
+	<button on:click={select(1)}>1</button>
+	<button on:click={select(2)}>2</button>
+	<button on:click={select(3)}>3</button>
+	<button on:click={select(4)}>4</button>
+	<button on:click={select(5)}>5</button>
+	<button on:click={select(6)}>6</button>
+	<button on:click={select(7)}>7</button>
+	<button on:click={select(8)}>8</button>
+	<button on:click={select(9)}>9</button>
+
+	<button disabled={!value} on:click={clear}>clear</button>
+	<button on:click={select(0)}>0</button>
+	<button disabled={!value} on:click={submit}>submit</button>
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/12-component-bindings/text.md b/site/content/tutorial/06-bindings/12-component-bindings/text.md
new file mode 100644
index 0000000000..9ab1be29cd
--- /dev/null
+++ b/site/content/tutorial/06-bindings/12-component-bindings/text.md
@@ -0,0 +1,13 @@
+---
+title: Component bindings
+---
+
+Just as you can bind to properties of DOM elements, you can bind to component props. For example, we can bind to the `value` prop of this `<Keypad>` component as though it were a form element:
+
+```html
+<Keypad bind:value={pin} on:submit={handleSubmit}/>
+```
+
+Now, when the user interacts with the keypad, the value of `pin` in the parent component is immediately updated.
+
+> Use component bindings sparingly. It can be difficult to track the flow of data around your application if you have too many of them, especially if there is no 'single source of truth'.
\ No newline at end of file