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 |