FieldGroup

import {FieldGroup} from 'cx/widgets';

The FieldGroup widget is pure container which allows disabling of multiple form elements using a single property. ValidationGroup widget may be used for this purpose too, under the hood, FieldGroup is just an alias for it.

Enabled

ReadOnly

ViewMode

First Name
Last Name
Status	Active
Active

FieldGroups

<Checkbox value-bind="$page.enabled">Enabled</Checkbox>
<Checkbox value-bind="$page.readOnly">ReadOnly</Checkbox>
<Checkbox value-bind="$page.viewMode">ViewMode</Checkbox>
<FieldGroup
    layout={LabelsLeftLayout}
    enabled-bind="$page.enabled"
    readOnly-bind="$page.readOnly"
    viewMode-bind="$page.viewMode"
    tabOnEnterKey
>
    <TextField label="First Name" value-bind="$page.firstName" required/>
    <TextField label="Last Name" value-bind="$page.lastName" required/>
    <Checkbox label="Status" value-bind="$page.active" text="Active" emptyText="Inactive" />
    <Button text="Button" />
</FieldGroup>

Copied!Cx Fiddle

Configuration

Property	Description	Type
asterisk	Set to `true` to add red asterisk for all required fields inside the group.	boolean
disabled	Set to `true` to disable all inner elements that support `disabled` property.	boolean
enabled	Set to `false` to disable all inner elements that support `disabled` property.	boolean
invalid	Binding which will be set to true if any of child form field reports validation error.	boolean
isolated	Set to `true` to isolate children from participating in outer validation scopes.	boolean
readOnly	Set to `true` to make read-only all inner elements that support `readOnly` property.	boolean
strict	Set to `true` to move focus to the next field if `Enter` key is pressed.	boolean
tabOnEnterKey	Set to `true` to move focus to the next field if `Enter` key is pressed.	boolean
valid	Binding which will be set to true if all child form field are valid.	boolean
viewMode	Set to `true` to switch all inner fields into view mode.	boolean
items children	List of child elements.	array
layout	Define an inner layout.	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

FieldGroup