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 · React

Code

How it works · React

CSS Grid arranges native inputs and a textarea. A shared handler copies each committed value into local state by field name, converting the number and checkbox values. Text fields commit on blur; the checkbox commits on change.

How it compares

Gramlot’s widgets supply value typing, commit behavior and label decoration alongside formlet layout. The displayed React recipe implements conversion and commit handling around native inputs. This integration reduces page-level policy code in Gramlot; a React form library or shared components could supply comparable abstractions, but they are additional code or dependencies to choose and maintain. Gramlot supplies these behaviors out of the box.