LabeledContainer

import { LabeledContainer } from 'cx/widgets';

The LabeledContainer widget groups multiple form fields under a single label. This is useful for related fields like name parts (first/last) or date ranges (start/end).

 <LabelsTopLayout vertical>
  <LabeledContainer label="Full Name">
    <div className="flex gap-2">
      <TextField value={m.firstName} placeholder="First" />
      <TextField value={m.lastName} placeholder="Last" />
    </div>
  </LabeledContainer>
  <LabeledContainer label="Date Range">
    <div className="flex gap-2">
      <DateField value={m.startDate} placeholder="Start" />
      <DateField value={m.endDate} placeholder="End" />
    </div>
  </LabeledContainer>
</LabelsTopLayout> 
 interface PageModel {
  firstName: string;
  lastName: string;
  startDate: string;
  endDate: string;
}

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

Full Name

Date Range

LabeledContainer extends FieldGroup, so it inherits all field group properties like disabled, readOnly, and viewMode.

Configuration

Property	Type	Description
`label`	`StringProp \| LabelConfig`	The label text or Label widget configuration.
`disabled`	`BooleanProp`	Set to `true` to disable all inner elements.
`mod`	`ModProp`	CSS modifier classes for the label.
`asterisk`	`BooleanProp`	Show required indicator next to the label.

Additionally, all FieldGroup properties are available: enabled, readOnly, viewMode, visited, strict, etc.