Examples · Basics

Two-way binding

bind:value and bind:checked on text, checkbox, radio, select and range.

Form controls are the one place where the DOM writes back into your state. bind:value and bind:checked wire both directions and pick the right event and property for each control type.

Playground

What to notice

  • One signal per control; the summary below is a computed over all of them.
  • Radios share a signal: bind:checked on a radio compares the value.
  • The range input writes a number, not a string, because the signal started as a number.

Move the slider and toggle the checkbox: the summary sentence rewrites itself.