# PureContainer

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

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

interface Model {
  showContactInfo: boolean;
  email: string;
  phone: string;
}

const m = createModel<Model>();

export const model = {
  showContactInfo: true,
  email: "",
  phone: "",
};

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

```

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