Contact box

Group contact fields inside a labelled box. In Gramlot, the box sets datapath=contact and its fields use relative bindings such as ^.first_name. All four values belong to the contact branch of Data and update on focus out.

Live example · Gramlot JS

Code

How it works · Gramlot JS

The box establishes the contact Data scope once. All four fields use relative ^. paths, so they inherit that scope without repeating contact in each binding. Shared CSS styles the box; the recipe describes its structure and connections.