# LabelsTopLayout

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

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

interface AddressModel {
  street: string;
  city: string;
  zip: string;
}

const m = createModel<AddressModel>();

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

```

Set the `width` style on form fields to align inputs properly. Use [LabeledContainer](/docs/forms/labeled-container) to group multiple widgets under a single label.

## Vertical Mode

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

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

interface FormModel {
  title: string;
  firstName: string;
  lastName: string;
}

const m = createModel<FormModel>();

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

```

## Multiple Columns

Use the `columns` property to arrange fields in a grid:

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

interface FormModel {
  field1: string;
  field2: string;
  field3: string;
  field4: string;
  field5: string;
  field6: string;
}

const m = createModel<FormModel>();

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

```

## 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:

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

interface FormModel {
  field1: string;
  field2: string;
  field3: string;
  notes: string;
}

const m = createModel<FormModel>();

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

```

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