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

Code

How it works · NiceGUI

The page function creates a contact dictionary and groups four inputs in a styled section. Each blur callback updates one dictionary entry. The shared CSS class supplies the title bar and border; the section itself does not establish a data scope.

How it compares

The NiceGUI section groups the UI, while callbacks separately identify the contact dictionary. In Gramlot, the box also establishes the Data scope used by all children. This joins visual composition and relative binding in one declaration; NiceGUI can hide its explicit dictionary wiring in a reusable function, but that function is additional application code. Gramlot includes the scope behavior directly in the container.