Inner Layouts

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

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:

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

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

const m = createModel<FormModel>();

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

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

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

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

const m = createModel<FormModel>();

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