UseParentLayout

UseParentLayout instructs a widget to use its parent’s layout instead of its own. It can only be used on widgets that render only their children without adding markup (pure containers).

This is commonly used with LabelsLeftLayout or LabelsTopLayout when you need conditionally visible form sections that should integrate seamlessly with the parent layout.

<LabelsLeftLayout>
  <TextField value={m.text} label="Label 1" />
  <Checkbox value={m.showMore}>Show More</Checkbox>
  <PureContainer layout={UseParentLayout} visible={m.showMore}>
    <TextField value={m.text2} label="Label 2" />
    <TextField value={m.text3} label="Label 3" />
  </PureContainer>
</LabelsLeftLayout>

interface FormModel {
  text: string;
  text2: string;
  text3: string;
  showMore: boolean;
}

const m = createModel<FormModel>();

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

Notice how the nested PureContainer widgets integrate with the parent LabelsLeftLayout, maintaining consistent label-input alignment even when content is conditionally shown or hidden.