## Model Binding

## Demo

<div id="container" data-on-load="sse('/examples/model_binding/data')"></div>

## Explanation

```html
<div
  id="container"
  data-signals="{text:'foo',number:42,bool:true,selection:1}"
>
  <input type="text" data-bind-text />
  <input type="number" data-bind-number />
  <textarea data-bind-text></textarea>
  <label>
    <span>Checkbox</span>
    <input type="checkbox" data-bind-bool />
  </label>
  <select data-bind-selection>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <div class="flex flex-col">
    <label>
      <input type="radio" data-bind-selection value="1" />
      <span>Option 1</span>
    </label>
    <label>
      <input type="radio" data-bind-selection value="2" />
      <span>Option 2</span>
    </label>
    <label>
      <input type="radio" data-bind-selection value="3" />
      <span>Option 3</span>
    </label>
    ...
  </div>
  <code>
    <pre data-text="ctx.signals.JSON()"></pre>
  </code>
</div>
```

Current the two-way data binding generated by `data-bind` supports

- `input`
- `textarea`
- `select`
- `checkbox`
- `radio`

**Note**: For radio buttons if you don't include a name for grouping the radio button will get the name of the signal as their name.

If there are more types that you need support for please [reach out](https://github.com/starfederation/datastar)!