LabelsTopLayout

import { LabelsTopLayout } from 'cx/ui';

LabelsTopLayout is used for dense forms with long labels or when labels are placed above inputs to save horizontal space. It renders children inside a table with two rows: one for labels and one for inputs.

 <LabelsTopLayout mod="top">
  <TextField
    value={m.street}
    label="Address"
    placeholder="Street"
    style={{ width: "150px" }}
  />
  <TextField value={m.city} placeholder="City" style={{ width: "150px" }} />
  <TextField value={m.zip} placeholder="Zip" style={{ width: "70px" }} />
</LabelsTopLayout> 
 interface AddressModel {
  street: string;
  city: string;
  zip: string;
}

const m = createModel<AddressModel>(); 
 import { createModel } from "cx/data";
import { LabelsTopLayout } from "cx/ui";
import { TextField } from "cx/widgets"; 

Address

Set the width style on form fields to align inputs properly. Use LabeledContainer to group multiple widgets under a single label.

Vertical Mode

Set vertical to true to render each field on its own row:

 <LabelsTopLayout vertical mod="top">
  <Select value={m.title} label="Title" style={{ width: "70px" }}>
    <option value="Mr">Mr.</option>
    <option value="Mrs">Mrs.</option>
  </Select>
  <TextField
    value={m.firstName}
    label="First Name"
    style={{ width: "150px" }}
  />
  <TextField value={m.lastName} label="Last Name" style={{ width: "150px" }} />
</LabelsTopLayout> 
 interface FormModel {
  title: string;
  firstName: string;
  lastName: string;
}

const m = createModel<FormModel>(); 
 import { createModel } from "cx/data";
import { LabelsTopLayout } from "cx/ui";
import { TextField, Select } from "cx/widgets"; 

Title

First Name

Last Name

Multiple Columns

Use the columns property to arrange fields in a grid:

 <LabelsTopLayout columns={3} mod="top">
  <TextField label="Field 1" value={m.field1} />
  <TextField label="Field 2" value={m.field2} />
  <TextField label="Field 3" value={m.field3} />
  <TextField label="Field 4" value={m.field4} />
  <TextField label="Field 5" value={m.field5} />
  <TextField label="Field 6" value={m.field6} />
</LabelsTopLayout> 
 interface FormModel {
  field1: string;
  field2: string;
  field3: string;
  field4: string;
  field5: string;
  field6: string;
}

const m = createModel<FormModel>(); 
 import { createModel } from "cx/data";
import { LabelsTopLayout } from "cx/ui";
import { TextField } from "cx/widgets"; 

Field 1	Field 2	Field 3

Field 4	Field 5	Field 6

Mods

Mod	Description
`top`	Removes top padding from labels in the first row. Useful inside a Window or dialog where the default label padding creates unwanted spacing at the top.
`stretch`	Makes the layout table stretch to full width.
`fixed`	Uses fixed table layout for equal column widths.

Configuration

Property	Type	Description
`vertical`	`boolean`	If `true`, renders each field on its own row. Default is `false`.
`columns`	`number`	Number of columns in the grid layout.

LabelsTopLayoutCell

Use LabelsTopLayoutCell to control column and row spanning for complex layouts:

 <LabelsTopLayout columns={3} mod="top">
  <TextField label="Field 1" value={m.field1} />
  <TextField label="Field 2" value={m.field2} />
  <TextField label="Field 3" value={m.field3} />
  <LabelsTopLayoutCell colSpan={3}>
    <TextArea
      label="Notes"
      value={m.notes}
      rows={3}
      style={{ width: "100%" }}
    />
  </LabelsTopLayoutCell>
</LabelsTopLayout> 
 interface FormModel {
  field1: string;
  field2: string;
  field3: string;
  notes: string;
}

const m = createModel<FormModel>(); 
 import { createModel } from "cx/data";
import { LabelsTopLayout, LabelsTopLayoutCell } from "cx/ui";
import { TextField, TextArea } from "cx/widgets"; 

Field 1	Field 2	Field 3

Notes

Property	Type	Description
`colSpan`	`number`	Number of columns to span.
`rowSpan`	`number`	Number of rows to span.