LabelsLeftLayout

import { LabelsLeftLayout } from 'cx/ui';

LabelsLeftLayout is used for horizontal form layouts. It renders children inside a table where labels go into the first column and inputs go into the second column.

 <LabelsLeftLayout>
  <TextField value={m.name} label="Name" />
  <TextField value={m.email} label="Email" />
  <NumberField value={m.age} label="Age" />
  <TextArea value={m.bio} label="Bio" rows={3} />
</LabelsLeftLayout> 
 interface FormModel {
  name: string;
  email: string;
  age: number;
  bio: string;
}

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

Name
Email
Age
Bio

Use LabeledContainer when multiple widgets need to share a single label.

Configuration

Property	Type	Description
`labelStyle`	`StyleProp`	Style applied to label cells.
`labelClass`	`ClassProp`	CSS class applied to label cells.