# Inner Layouts



Inner layouts define how a widget's children are arranged. They are typically used as container components.

| Layout | Purpose |
| ------ | ------- |
| [LabelsLeftLayout](labels-left-layout) | Horizontal form layout with labels on the left |
| [LabelsTopLayout](labels-top-layout) | Form layout with labels above inputs |
| [FirstVisibleChildLayout](first-visible-child-layout) | Shows only the first visible child |
| [UseParentLayout](use-parent-layout) | Delegates layout to the parent container |

## Default Behavior (No Layout)

When no layout is specified, children render in the order they are defined. For form fields, this means the label appears inline before the input:

```tsx
import { createModel } from "cx/data";
import { TextField, Checkbox } from "cx/widgets";

interface FormModel {
  text: string;
  check: boolean;
}

const m = createModel<FormModel>();

export default (
  <div>
    First some text.
    <TextField value={m.text} label="Label 1" />
    <Checkbox value={m.check} label="Label 2">
      Checkbox
    </Checkbox>
  </div>
);

```

This default behavior doesn't work well for structured forms. Use a layout component to arrange form fields properly:

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

interface FormModel {
  text: string;
  check: boolean;
}

const m = createModel<FormModel>();

export default (
  <LabelsLeftLayout>
    First some text.
    <TextField value={m.text} label="Label 1" />
    <Checkbox value={m.check} label="Label 2">
      Checkbox
    </Checkbox>
  </LabelsLeftLayout>
);

```