# LabeledContainer

```ts
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).

```tsx
import { createModel } from "cx/data";
import { LabelsTopLayout } from "cx/ui";
import { LabeledContainer, TextField, DateField } from "cx/widgets";

interface PageModel {
  firstName: string;
  lastName: string;
  startDate: string;
  endDate: string;
}

const m = createModel<PageModel>();

export default (
  <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>
);

```

`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.