FieldGroup

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.

 <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> 
 interface PageModel {
  enabled: boolean;
  readOnly: boolean;
  viewMode: boolean;
  firstName: string;
  lastName: string;
  active: boolean;
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { LabelsLeftLayout } from "cx/ui";
import { FieldGroup, TextField, Checkbox, Button } from "cx/widgets"; 

Enabled

Read Only

View Mode

First Name
Last Name
Status	Active

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.