Basics · Bindings

Select and radio groups

A <select> binds its chosen value with bind:value — the same syntax as a text input, backed by a *sumi.Signal[string]. The binding selects the option whose value matches the signal, and an external Set moves the selection. The arrow keys move it while the select is focused; a click advances it. In the starting app the select isn’t bound, so the Show: line stays on its default.

Radios are different. They hold a boolean each, so they don’t take bind:value; a radio binds with bind:checked like a checkbox. Radios with the same name form a group — checking one unchecks the others across the tree, and a checked radio won’t toggle itself off.

For a group that stands for a single value (a priority, a filter), the tidiest wiring is often the event escape hatch: give each radio onchange={handler} and read evt.Data["value"].(string) — the change carries the radio’s value attribute. That is what the radios below already do; you only need to bind the select.

Your turn

Bind the select to the filter signal:

<select bind:value={filter}>

Press Run, change the dropdown with the arrow keys or a click, and pick a priority with the radios — both lines update.