Form Steps Guide

Form Steps Configuration

@enlolab/forms allows you to create multi-step forms with conditional navigation. This guide explains how to configure steps and their conditions.

Basic Steps Structure

steps: {
  step1: {
    id: "step1",
    fields: ["field1", "field2", "field3"]
  },
  step2: {
    id: "step2",
    fields: ["field4", "field5"]
  }
}

Step Properties

id

Unique identifier for the step. Must match the key in the steps object.

fields

Array of field names that should be displayed in this step.

defaultNext

Optional property that defines the default next step if no conditions are met:

step1: {
  id: "step1",
  fields: ["field1", "field2"],
  defaultNext: "step2"
}

Array of conditions that determine the next step based on form values:

step1: {
  id: "step1",
  fields: ["field1", "field2"],
  next: [
    {
      conditions: [
        {
          field: "field1",
          operator: "equals",
          value: "yes"
        }
      ],
      operator: "AND",
      target: "step2"
    }
  ]
}

Condition Operators

@enlolab/forms supports the following condition operators:

Operator	Description	Example
`equals`	Field equals value	`{ operator: "equals", value: "yes" }`
`notEquals`	Field not equals value	`{ operator: "notEquals", value: "no" }`
`contains`	Field contains value	`{ operator: "contains", value: "test" }`
`notContains`	Field does not contain value	`{ operator: "notContains", value: "test" }`
`greaterThan`	Field is greater than value	`{ operator: "greaterThan", value: 10 }`
`lessThan`	Field is less than value	`{ operator: "lessThan", value: 5 }`
`greaterThanOrEqual`	Field is greater than or equal to value	`{ operator: "greaterThanOrEqual", value: 10 }`
`lessThanOrEqual`	Field is less than or equal to value	`{ operator: "lessThanOrEqual", value: 5 }`
`isTrue`	Field is true	`{ operator: "isTrue" }`
`isFalse`	Field is false	`{ operator: "isFalse" }`
`isEmpty`	Field is empty	`{ operator: "isEmpty" }`
`isNotEmpty`	Field is not empty	`{ operator: "isNotEmpty" }`

Complex Conditions

You can combine multiple conditions using AND/OR operators:

step1: {
  id: "step1",
  fields: ["age", "hasLicense", "country"],
  next: [
    {
      conditions: [
        {
          field: "age",
          operator: "greaterThanOrEqual",
          value: 18
        },
        {
          field: "hasLicense",
          operator: "isTrue"
        }
      ],
      operator: "AND",
      target: "step2"
    },
    {
      conditions: [
        {
          field: "country",
          operator: "equals",
          value: "US"
        }
      ],
      operator: "OR",
      target: "step3"
    }
  ],
  defaultNext: "step4"
}

Complete Example

const myForm = FormFactory({
  formId: "example-form",
  fields: {
    age: {
      type: "number",
      label: "Age",
    },
    hasLicense: {
      type: "checkbox",
      label: "Do you have a driver's license?",
    },
    country: {
      type: "select",
      label: "Country",
      options: [
        { label: "United States", value: "US" },
        { label: "Canada", value: "CA" },
        { label: "Mexico", value: "MX" },
      ],
    },
  },
  steps: {
    personalInfo: {
      id: "personalInfo",
      fields: ["age", "hasLicense", "country"],
      next: [
        {
          conditions: [
            {
              field: "age",
              operator: "greaterThanOrEqual",
              value: 18,
            },
            {
              field: "hasLicense",
              operator: "isTrue",
            },
          ],
          operator: "AND",
          target: "drivingInfo",
        },
      ],
      defaultNext: "generalInfo",
    },
    drivingInfo: {
      id: "drivingInfo",
      fields: ["licenseNumber", "expiryDate"],
    },
    generalInfo: {
      id: "generalInfo",
      fields: ["name", "email"],
    },
  },
});

Best Practices

Clear Step Names: Use descriptive IDs for your steps
Logical Grouping: Group related fields in the same step
Conditional Logic: Use conditions to create dynamic form flows
Default Path: Always provide a defaultNext to ensure the form can proceed
Validation: Consider step validation requirements when designing the flow