# LabelsLeftLayout

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

```tsx
import { createModel } from "cx/data";
import { LabelsLeftLayout } from "cx/ui";
import { TextField, NumberField, TextArea } from "cx/widgets";

interface FormModel {
  name: string;
  email: string;
  age: number;
  bio: string;
}

const m = createModel<FormModel>();

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

```

Use [LabeledContainer](/docs/forms/labeled-container) 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. |