From 6859fb26fc397bcdff07f5aa1d1916b9ec70aca0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Denuzi=C3=A8re?= <ldenuziere@d-edge.com>
Date: Wed, 21 May 2025 09:03:24 +0200
Subject: [PATCH] Document radio buttons in HTML template

---
 src/Website/docs/Templating.md | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/Website/docs/Templating.md b/src/Website/docs/Templating.md
index a4a3759..954bb80 100644
--- a/src/Website/docs/Templating.md
+++ b/src/Website/docs/Templating.md
@@ -171,8 +171,6 @@ The type of the binding value depends on the element on which the `bind` attribu
 * `<input type="checkbox">` has a boolean value, and can be filled by a `bool`.
 * `<input>` with other types or no type, `<textarea>` and `<select>` have an arbitrary value, and can be filled by a `string`.
 
-> Note: Radio buttons (`<input type="radio">`) are not yet supported by Blazor, and therefore by Bolero; see [the issue on Blazor's tracker](https://github.com/aspnet/Blazor/issues/1322).
-
 ```html
 <input type="checkbox" bind="${IsChecked}">
 ```
@@ -214,6 +212,35 @@ let hello model dispatch =
         .Elt()
 ```
 
+Radio buttons can also use `bind`:
+
+```html
+<!-- use the same name for the 3 radio buttons to group them. -->
+<input type="radio" name="select-color" bind="${Red}">
+<input type="radio" name="select-color" bind="${Green}">
+<input type="radio" name="select-color" bind="${Blue}">
+```
+
+```fsharp
+type Color = Red | Green | Blue
+type Model = { color: Color }
+
+type Message =
+    | SetColor of Color
+
+type RadioButtons = Template<"radioButtons.html">
+
+let radioButtons model dispatch =
+    // HTML requires each button to have a different string value,
+    // but you don't have to use this string in the event handler
+    // if you have a better typed value at hand.
+    RadioButtons()
+        .Red("Red", fun _ -> dispatch (SetColor Red))
+        .Green("Green", fun _ -> dispatch (SetColor Green))
+        .Blue("Blue", fun _ -> dispatch (SetColor Blue))
+        .Elt()
+```
+
 #### Event handlers for data binding
 
 The binding can listen to changes on the input element using one of two different event handlers: `onchange` or `oninput`.