PureContainer

import { PureContainer } from 'cx/ui';

PureContainer groups multiple widgets together without adding any HTML markup to the DOM. This is useful when you need to control visibility or apply a layout to a group of elements.

 <div>
  <Checkbox value={m.showContactInfo}>Show contact information</Checkbox>
  <PureContainer visible={m.showContactInfo}>
    <div class="mt-2 font-bold">Contact Information</div>
    <LabelsTopLayout>
      <TextField value={m.email} label="Email" />
      <TextField value={m.phone} label="Phone" />
    </LabelsTopLayout>
    <p className="text-gray-500 text-sm mt-4">
      We'll never share your contact information.
    </p>
  </PureContainer>
</div> 
 export const model = {
  showContactInfo: true,
  email: "",
  phone: "",
}; 
 import { createModel } from "cx/data";
import { LabelsTopLayout, PureContainer } from "cx/ui";
import { Checkbox, TextField } from "cx/widgets"; 

Show contact information

Common Use Cases

Toggle visibility of multiple widgets at once using visible
Apply a shared layout to a group of form fields
Base class for other CxJS components like ValidationGroup, Repeater, and Route

Configuration

Property	Type	Description
`visible`	`boolean`	Controls visibility of all children.
`layout`	`string \| object`	Inner layout applied to children.
`items` / `children`	`array`	List of child elements.
`controller`	`object`	Controller instance for this container.
`trimWhitespace`	`boolean`	Remove whitespace in text children. Default is `true`.
`preserveWhitespace` / `ws`	`boolean`	Keep whitespace in text children. Default is `false`.