Two Columns

⚠️

The two-columns component is deprecated, use the new columns component. Form schemas using two-columns will be converted automatically to use the new component.

The Two Columns two-columns is a layout field, it can be used to create a better fields layout and can contain one or more fields or layout components like Group, Array, Tabs or Steps. Fields are defined in leftFields and rightFields keys

Example


 {
  "component": "two-columns",
  "label": "Field 1",
  "name": "field_1",
  "leftFields": [
    {
      "component": "input-text",
      "label": "Field 1",
      "name": "field_1",
      "react-rsuite5": {
        "fullWidth": true
      }
    }
  ],
  "rightFields": [
    {
      "component": "rate",
      "label": "Field 2",
      "name": "field_2",
      "count": 5,
      "fractions": 1,
      "react-rsuite5": {
        "max": 5
      }
    }
  ]
}

LetsForm DSL

The above example can also be defined with LetsForm DSL


<LfColumns
  name="field_column"
>
  <LfColumn>
    <LfField
      component="input-text"
      label="Field 1"
      name="field_1"
      fullWidth={true}
    />
  </LfColumn>
  <LfColumn>
    <LfField
      component="rate"
      label="Field 2"
      name="field_2"
      count={5}
      fractions={1}
      max={5}
    />
  </LfColumn>
</LfColumns>

Reference

Property	Type	Description
component	string	= "two-columns"
name	string	The name of the field and the key of the JSON
layout	string	Values: "layout-1-1", "layout-1-2", "layout-1-3", "layout-1-4", "layout-2-1", "layout-3-1", "layout-4-1", "layout-2-3", "layout-3-2", "layout-0-1", "layout-1-0".
leftAlignment	string	Flex "align-self" attribute for the column. Values: "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset".
rightAlignment	string	Flex "align-self" attribute for the column. Values: "auto", "baseline", "center", "end", "flex-end", "flex-start", "inherit", "initial", "normal", "revert", "self-end", "self-start", "start", "stretch", "unset".
hidden	boolean	Hides the layout component and all components inside it
className	string	CSS class name to assign to the field container