Group

The Group group is a layout and collapsible field that can contain one or more fields or layout components like Group, Columns, Array, Tabs or Steps.

Example


{
  "component": "group",
  "label": "I'm a group",
  "name": "my_group",
  "collapsible": true,
  "open": true,
  "align": "center",
  "fields": [
    // fields inside the group
  ]
}

LetsForm DSL

The above example can also be defined with LetsForm DSL


<LfGroup
  label="I'm a group"
  name="my_group"
  collapsible={true}
  open={true}
  align="center"
>
  <LfField
    component="input-text"
    label="My text inside a group"
    name="my_text"
    fullWidth={true}
  />
</LfGroup>

Reference

Property	Type	Description
component	string	= "group"
name	string	Group name (for internal scripting)
label	string \| i18n	Label of the field
hidden	boolean	Hides the field from the form
align	string	Values: "left", "center", "right".
collapsible	boolean	Make the group of fields collapsible
open	boolean	Collapsible group initially open. Default: true.
border	string	Values: "top", "bottom", "topBottom", "boxed".
className	string	CSS class name to assign to the field container
fields	[field]	Array of fields to be rendered inside the group

Also check the CSS variables to customize the group component.