From e7b25cf99dd364ae6a378d140e1348b1ddf408da Mon Sep 17 00:00:00 2001
From: Greg Johnston <greg.johnston@gmail.com>
Date: Fri, 3 Jan 2025 10:35:24 -0500
Subject: [PATCH] Add `bind:` syntax (closes #153)

---
 src/view/05_forms.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/view/05_forms.md b/src/view/05_forms.md
index 45d9517..4567192 100644
--- a/src/view/05_forms.md
+++ b/src/view/05_forms.md
@@ -69,6 +69,39 @@ view! {
 >
 > Many other frontend frameworks conflate attributes and properties, or create a special case for inputs that sets the value correctly. Maybe Leptos should do this too; but for now, I prefer giving users the maximum amount of control over whether they’re setting an attribute or a property, and doing my best to educate people about the actual underlying browser behavior rather than obscuring it.
 
+### Simplifying Controlled Inputs with `bind:`
+
+Adherence to Web standards and a clear division between “reading from a signal” and ”writing to a signal” are good, but creating
+controlled inputs in this way can sometimes seem like more boilerplate than is really necessary.
+
+Leptos also includes a special `bind:` syntax for inputs that allows you to automatically bind signals to inputs. They do exactly the same thing as the “controlled input” pattern above: create an event listener that updates the signal, and a dynamic property that reads from the signal. You can use `bind:value` for text inputs, and `bind:checked` for checkboxes.
+
+```rust
+let (name, set_name) = signal("Controlled".to_string());
+let email = RwSignal::new("".to_string());
+let spam_me = RwSignal::new(true);
+
+view! {
+    <input type="text"
+        bind:value=(name, set_name)
+    />
+    <input type="email"
+        bind:value=email
+    />
+    <label>
+        "Please send me lots of spam email."
+        <input type="checkbox"
+            bind:checked=spam_me
+        />
+    </label>
+    <p>"Name is: " {name}</p>
+    <p>"Email is: " {email}</p>
+    <Show when=move || spam_me.get()>
+        <p>"You’ll receive cool bonus content!"</p>
+    </Show>
+}
+```
+
 ## Uncontrolled Inputs
 
 In an "uncontrolled input," the browser controls the state of the input element.