Steps

The Steps steps component is a layout field, use it to organize fields in multi-step forms. Fields are defined in fields key as hash object, each key of the fields objects is an array of fields and must match the values of the tabs array of object.

Example

{
  "component": "steps",
  "name": "my_steps",
  "tabs": [
    {
      "value": "one",
      "label": "One"
    },
    {
      "value": "two",
      "label": "Two"
    },
    {
      "value": "three",
      "label": "Three"
    }
  ],
  "fields": {
    "one": [
      // fields for step 1, i.e.
      // {
      //    "component": "input-text",
      //    "name": "my_field",
      //    "label": "My Field"
      // }
    ],
    "two": [
      // fields for step 2
    ],
    "three": [
      // fields for step 3
    ]
  }
}

LetsForm DSL

The above example can also be defined with LetsForm DSL

<LfSteps name="my_steps">
  <LfStep value="one" label="One">
    <LfField
      component="input-text"
      label="Field 1"
      name="field_1"
    />
  </LfStep>
  <LfStep value="two" label="Two">
    // ...more fields
  </LfStep>
  <LfStep value="three" label="Three">
    // ...more fields
  </LfStep>
</LfSteps>

Reference

Property	Type	Description
component	string	= "steps"
name	string	The name of the field and the key of the JSON
hidden	boolean	Hides the field from the form
labelNext	string \| i18n	Label for next button
labelPrevious	string \| i18n	Label for previous button
align	string	Values: "left", "center", "right".
Pick up a framework to show specific properties Select framework

Properties for step object

Property	Type	Description
value	string	Internal name for step, to be used with Form Scripts
label	string	Name of the step
Pick up a framework to show specific properties Select framework