datastar/site/static/md/examples/model_binding.md

Model Binding

Demo

Explanation

<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!