Basics · Bindings

Checkboxes with bind:checked

A checkbox holds a boolean, so it binds with bind:checked rather than bind:value. The signal must be a *sumi.Signal[bool]. Space toggles the focused checkbox; Enter and a mouse click do too, and each toggle keeps the bound signal in step.

In the starting app the checkbox renders but isn’t wired, so the {if showDone.Get()} block never appears. Bind it and the completed line shows and hides as you toggle.

Keep the binding on a statically placed control for full two-way behaviour. A bind: inside {if} or {for} content only wires the update half — typing or toggling still writes the signal, but an external Set won’t re-project onto the control. The checkbox here sits directly in the template, so both directions work.

Your turn

Bind the checkbox to showDone:

<input type="checkbox" bind:checked={showDone} />

Press Run and toggle the checkbox with Space or a click — the completed item appears and disappears.