Form

Usage

Use Form to wrap kit fields (Input, Textarea, Select, DatePicker, Lookup, Cascader, FormulaEditor, Checkbox, RadioGroup, Switch) that save together. Read-only values go in FormDisplay rows; back-to-back rows sit flush as one list. Pass the fields as children, or as sections when they fall into groups like Company and Billing; each section is a titled group. labelPosition="start" puts every field's label in a column at the beginning; columns={2} puts fields side by side, and columns={3} puts them in threes on a wide page. Once columns is set (1, 2 or 3), each column stops at 554px (--layout-column-max) and the fields stay at the start, so a wide page leaves the space on the right empty instead of stretching the fields; with columns unset, the fields fill the form, as in a Modal or Drawer. Inside a FormPage the Form takes the page's columns unless it sets its own. A long form of groups — a create page — takes sections with collapsible, and the save can sit outside the form: give the Form an id and the Button type="submit" with form set to it, so one press still saves one form. actions holds kit Buttons: subtle first, one strong brand Button last with type="submit". Enter in a field submits, and onSubmit gets the values by field name. Inside a Modal, skip the title (the Modal names it), give the Form an id, and put the Save Button in the Modal footer with form set to that id. See contracts/form.json for the full contract.