LabeledContainer

import {LabeledContainer} from 'cx/widgets';

The LabeledContainer widget is used in combination with LabelsLeftLayout to group multiple items under the same label.

Name
Origin

LabeledContainers

<div layout={LabelsLeftLayout}>
   <LabeledContainer label="Name" trimWhitespace={false}>
      <TextField value-bind="$page.person.firstName" placeholder="First Name" />
      <TextField value-bind="$page.person.lastName" placeholder="Last Name" />
   </LabeledContainer>
   <LabeledContainer label="Origin" trimWhitespace={false}>
      <DateField value-bind="$page.person.dob" placeholder="DOB" />
      <TextField value-bind="$page.person.country" placeholder="Country" />
   </LabeledContainer>
</div>

Copied!Cx Fiddle

Configuration

Property	Description	Type
label	The label.	string/object
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

LabeledContainer