Skip to content

Document radio buttons in HTML template #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tarmil merged 1 commit into from
Jun 7, 2025
Merged

Document radio buttons in HTML template #69

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 29 additions & 2 deletions src/Website/docs/Templating.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}">
```
Expand Down Expand Up @@ -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`.
Expand Down
Loading