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.

Example · React

Code

How it works · React

One local contact object holds the committed field values. The blur handler updates the property named by the input, and a section with the contact-box CSS class groups the fields visually. React uses explicit object properties rather than inherited Data paths.

How it compares

Gramlot’s container establishes a Data scope: its children can use relative paths without naming the contact object. This React recipe names state properties and uses a commit handler. A reusable React component could accept a contact and an update callback, but that abstraction must be added. Gramlot includes scope inheritance in the container model, so the page needs no extra component to obtain it.