# FieldGroup

```ts
import { FieldGroup } from 'cx/widgets';
```

The `FieldGroup` widget is a pure container that allows controlling multiple form elements using shared properties like `disabled`, `readOnly`, and `viewMode`. Under the hood, `FieldGroup` is an alias for `ValidationGroup`.

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

interface PageModel {
  enabled: boolean;
  readOnly: boolean;
  viewMode: boolean;
  firstName: string;
  lastName: string;
  active: boolean;
}

const m = createModel<PageModel>();

export default (
  <div>
    <div className="flex gap-4 mb-4">
      <Checkbox value={m.enabled}>Enabled</Checkbox>
      <Checkbox value={m.readOnly}>Read Only</Checkbox>
      <Checkbox value={m.viewMode}>View Mode</Checkbox>
    </div>
    <FieldGroup
      layout={LabelsLeftLayout}
      enabled={m.enabled}
      readOnly={m.readOnly}
      viewMode={m.viewMode}
    >
      <TextField label="First Name" value={m.firstName} required />
      <TextField label="Last Name" value={m.lastName} required />
      <Checkbox label="Status" value={m.active} text="Active" />
      <Button text="Submit" mod="primary" />
    </FieldGroup>
  </div>
);

```

Toggle the checkboxes to see how `enabled`, `readOnly`, and `viewMode` affect all fields within the group.

## Configuration

| Property | Type | Description |
| -------- | ---- | ----------- |
| `enabled` | `BooleanProp` | Set to `false` to disable all inner elements. |
| `disabled` | `BooleanProp` | Set to `true` to disable all inner elements. |
| `readOnly` | `BooleanProp` | Set to `true` to make all inner elements read-only. |
| `viewMode` | `BooleanProp` | Set to `true` to set all child fields to view mode. |
| `visited` | `BooleanProp` | Set to `true` to notify all children to report errors. |
| `strict` | `BooleanProp` | Force children to respect disabled, readOnly, viewMode flags. |
| `tabOnEnterKey` | `BooleanProp` | Set to `true` to tab on Enter key for all children. |
| `asterisk` | `BooleanProp` | Set to `true` to add red asterisk for all required fields. |
| `valid` | `BooleanProp` | Binding set to `true` if all child fields are valid. |
| `invalid` | `BooleanProp` | Binding set to `true` if any child field has validation error. |
| `errors` | `Prop` | Binding to store validation errors array. |
| `isolated` | `BooleanProp` | Set to `true` to isolate from outer validation scopes. |