Input widgets

Try text, number, date, time, checkbox and multiline inputs. Gramlot’s formlet arranges labelled widgets in two fixed columns; each widget binds to its own Data field. Text fields commit on focus out, and the checkbox commits when toggled. This lesson covers field layout and editing, without submission or persistence.

Example · Vue

Code

How it works · Vue

A reactive object stores the field values. v-model.lazy commits text-like fields on change, .number converts the quantity, and the checkbox uses ordinary v-model. CSS Grid supplies the two-column layout.

How it compares

Vue’s v-model modifiers already handle much of the input binding concisely. Gramlot combines typed widgets, labels and formlet layout in one authoring model. The concrete difference here is that integrated widget contract; fewer declarations alone would not establish a semantic advantage. The date/time representations also differ between these recipes.