docs / Runtime

Two-Way Bindings

bindValue, bindChecked and bindGroup for wiring tracked cells to DOM form elements.

Vesk provides utilities for two-way data binding between reactive cells and DOM form elements. All auto-imported from `@vesk/runtime`.

bindValue

app/components/NameInput.vsk
										
											component NameInput() {
  let &[name] = track('');
  <input value={name} ref={bindValue(name)} />
}
										
									
  • Reads the cell and sets the element's value; on input/change writes back.
  • Handles `<input>` and `<select>` (including multiple); type="number" and type="range" coerce to numbers.
  • Accepts a custom setter: `bindValue(count, (val) => Math.max(0, Number(val)))`.
  • Returns a cleanup function, run when the element unmounts.

bindChecked / bindGroup

app/components/NameInput.vsk
										
											component NameInput() {
  let &[name] = track('');
  <input value={name} ref={bindValue(name)} />
}
										
									
Function Target elements Binds
bindValue(cell, setFn?) <input>, <select> value property
bindChecked(cell, setFn?) <input type="checkbox"> checked property
bindGroup(cell, setFn?) <input type="radio">, checkbox group value