# UseParentLayout

```ts
import { UseParentLayout } from 'cx/ui';
```

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

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

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

const m = createModel<FormModel>();

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

```

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