StepsForm

StepsForm orchestrates nested step forms via a context Provider: each inner form holds a full snapshot of values, then StepsForm merges them after the final submission. Built-in Steps UI and helpers track progress.

StepsForm extends antd Form.Provider. Serialization of dates (for example converting dayjs for submit) follows ProForm’s pipeline, so payloads in onFormFinish / onFormChange are still the raw Field values managed by Provider.

When steps are split into components, each StepForm owns a separate Form instance, so a single useWatch outside StepsForm cannot watch across every step. Read merged values with stepsFormRef.current?.getAllFieldsValue(), lift the reactive value from onFormChange into parent state, and pass it to other steps for conditional fields or request parameters.

Basic step flow

Basic StepsForm

import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProCard,
  ProForm,
  ProFormCheckbox,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import { message } from 'antd';
import { useRef } from 'react';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const Demo = () => {
  const formRef = useRef<ProFormInstance>();

  return (
    <ProCard>
      <StepsForm<{
        name: string;
      }>
        formRef={formRef}
        onFinish={async () => {
          await waitTime(1000);
          message.success('Submission successful');
        }}
        formProps={{
          validateMessages: {
            required: 'This field is required',
          },
        }}
      >
        <StepsForm.StepForm<{
          name: string;
        }>
          name="steps-from-base"
          title="Create Experiment"
          stepProps={{
            content: 'All basic information is filled in here',
          }}
          onFinish={async () => {

            await waitTime(2000);
            return true;
          }}
        >
          <ProFormText
            name="name"
            label="Experiment Name"
            width="md"
            tooltip="Up to 24 characters, used as a unique id"
            placeholder="Please enter a name"
            rules={[{ required: true }]}
          />
          <ProFormDatePicker name="date" label="Date" />
          <ProFormDateRangePicker name="dateTime" label="Time Range" />
          <ProFormTextArea
            name="remark"
            label="Remarks"
            width="lg"
            placeholder="Please enter remarks"
          />
        </StepsForm.StepForm>
        <StepsForm.StepForm<{
          checkbox: string;
        }>
          name="steps-from-checkbox"
          title="Set Parameters"
          stepProps={{
            content: 'Fill in the operation parameters here',
          }}
          onFinish={async () => {

            return true;
          }}
        >
          <ProFormCheckbox.Group
            name="checkbox"
            label="Migration Type"
            width="lg"
            options={[
              'Structural Migration',
              'Full Migration',
              'Incremental Migration',
              'Full Verification',
            ]}
          />
          <ProForm.Group>
            <ProFormText name="dbname" label="Business DB Username" />
            <ProFormDatePicker
              name="datetime"
              label="Record Retention Time"
              width="sm"
            />
            <ProFormCheckbox.Group
              name="checkbox"
              label="Migration Type"
              options={['Complete LOB', 'Do Not Sync LOB', 'Restricted LOB']}
            />
          </ProForm.Group>
        </StepsForm.StepForm>
        <StepsForm.StepForm
          name="steps-from-time"
          title="Publish Experiment"
          stepProps={{
            content: 'Fill in the release criteria here',
          }}
        >
          <ProFormCheckbox.Group
            name="checkbox"
            label="Deployment Units"
            rules={[
              {
                required: true,
              },
            ]}
            options={[
              'Deployment Unit 1',
              'Deployment Unit 2',
              'Deployment Unit 3',
            ]}
          />
          <ProFormSelect
            label="Deployment Group Strategy"
            name="remark"
            rules={[
              {
                required: true,
              },
            ]}
            initialValue="1"
            options={[
              {
                value: '1',
                label: 'Strategy One',
              },
              { value: '2', label: 'Strategy Two' },
            ]}
          />
          <ProFormSelect
            label="Pod Scheduling Strategy"
            name="remark2"
            initialValue="2"
            options={[
              {
                value: '1',
                label: 'Strategy One',
              },
              { value: '2', label: 'Strategy Two' },
            ]}
          />
        </StepsForm.StepForm>
      </StepsForm>
    </ProCard>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Vertical steps layout

StepsForm vertical

import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProCard,
  ProForm,
  ProFormCheckbox,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import { message } from 'antd';
import { useRef } from 'react';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const Demo = () => {
  const formRef = useRef<ProFormInstance>();

  return (
    <ProCard>
      {/* allowStepSelect：可点击步骤条切换，不触发表单校验 */}
      <StepsForm<{
        name: string;
      }>
        allowStepSelect
        stepsProps={{
          orientation: 'vertical',
        }}
        formRef={formRef}
        onFinish={async () => {
          await waitTime(1000);
          message.success('提交成功');
        }}
        formProps={{
          validateMessages: {
            required: '此项为必填项',
          },
        }}
      >
        <StepsForm.StepForm<{
          name: string;
        }>
          name="steps-form-vertical-base"
          title="创建实验"
          stepProps={{
            description: '这里填入的都是基本信息',
          }}
          onFinish={async () => {
            await waitTime(2000);
            return true;
          }}
        >
          <ProFormText
            name="name"
            label="实验名称"
            width="md"
            tooltip="最长为 24 位，用于标定的唯一 id"
            placeholder="请输入名称"
            rules={[{ required: true }]}
          />
          <ProFormDatePicker name="date" label="日期" />
          <ProFormDateRangePicker name="dateTime" label="时间区间" />
          <ProFormTextArea
            name="remark"
            label="备注"
            width="lg"
            placeholder="请输入备注"
          />
        </StepsForm.StepForm>
        <StepsForm.StepForm<{
          checkbox: string;
        }>
          name="steps-form-vertical-checkbox"
          title="设置参数"
          stepProps={{
            description: '这里填入运维参数',
          }}
          onFinish={async () => {
            return true;
          }}
        >
          <ProFormCheckbox.Group
            name="checkbox"
            label="迁移类型"
            width="lg"
            options={[
              '结构迁移',
              '全量迁移',
              '增量迁移',
              '全量校验',
              '增量校验',
              '全量替换',
              '增量替换',
            ]}
          />
          <ProForm.Group>
            <ProFormText name="dbname" label="业务 DB 用户名" />
            <ProFormDatePicker
              name="datetime"
              label="记录保存时间"
              width="sm"
            />
          </ProForm.Group>
          <ProFormCheckbox.Group
            name="checkbox"
            label="迁移类型"
            options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
          />
        </StepsForm.StepForm>
        <StepsForm.StepForm<{
          checkbox: string;
        }>
          name="steps-form-vertical-step3"
          title="第三步"
          stepProps={{
            description: '这里填入运维参数',
          }}
          onFinish={async () => {
            return true;
          }}
        >
          <ProFormCheckbox.Group
            name="checkbox"
            label="迁移类型"
            width="lg"
            options={['结构迁移', '全量迁移', '全量校验', '增量替换']}
          />
          <ProForm.Group>
            <ProFormText name="dbname" label="业务 DB 用户名" />
            <ProFormDatePicker
              name="datetime"
              label="记录保存时间"
              width="sm"
            />
          </ProForm.Group>
          <ProFormCheckbox.Group
            name="checkbox"
            label="迁移类型"
            options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
          />
        </StepsForm.StepForm>
      </StepsForm>
    </ProCard>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Custom step actions

Custom step buttons

import {
  ProCard,
  ProForm,
  ProFormCheckbox,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import { Button, message } from 'antd';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const Demo = () => {
  return (
    <ProCard>
      <StepsForm<{
        name: string;
      }>
        onFinish={async () => {

          await waitTime(1000);
          message.success('提交成功');
        }}
        formProps={{
          validateMessages: {
            required: '此项为必填项',
          },
        }}
        submitter={{
          render: (props) => {
            if (props.step === 0) {
              return (
                <Button type="primary" onClick={() => props.onSubmit?.()}>
                  去第二步 {'>'}
                </Button>
              );
            }

            if (props.step === 1) {
              return [
                <Button key="pre" onClick={() => props.onPre?.()}>
                  返回第一步
                </Button>,
                <Button
                  type="primary"
                  key="goToTree"
                  onClick={() => props.onSubmit?.()}
                >
                  去第三步 {'>'}
                </Button>,
              ];
            }

            return [
              <Button key="gotoTwo" onClick={() => props.onPre?.()}>
                {'<'} 返回第二步
              </Button>,
              <Button
                type="primary"
                key="goToTree"
                onClick={() => props.onSubmit?.()}
              >
                提交 √
              </Button>,
            ];
          },
        }}
      >
        <StepsForm.StepForm<{
          name: string;
        }>
          name="customize-steps-from-base"
          title="创建实验"
          onFinish={async ({ name: _name }) => {

            await waitTime(2000);
            return true;
          }}
        >
          <ProFormText
            name="name"
            label="实验名称"
            width="md"
            tooltip="最长为 24 位，用于标定的唯一 id"
            placeholder="请输入名称"
            rules={[{ required: true }]}
          />
          <ProFormDatePicker name="date" label="日期" />
          <ProFormDateRangePicker name="dateTime" label="时间区间" />
          <ProFormTextArea
            name="remark"
            label="备注"
            width="lg"
            placeholder="请输入备注"
          />
        </StepsForm.StepForm>
        <StepsForm.StepForm<{
          checkbox: string;
        }>
          name="customize-steps-from-checkbox"
          title="设置参数"
        >
          <ProFormCheckbox.Group
            name="checkbox"
            label="迁移类型"
            width="lg"
            options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
          />
          <ProForm.Group>
            <ProFormText name="dbname" label="业务 DB 用户名" />
            <ProFormDatePicker
              name="datetime"
              label="记录保存时间"
              width="sm"
            />
            <ProFormCheckbox.Group
              name="checkbox"
              label="迁移类型"
              options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
            />
          </ProForm.Group>
        </StepsForm.StepForm>
        <StepsForm.StepForm name="customize-steps-from-time" title="发布实验">
          <ProFormCheckbox.Group
            name="checkbox"
            label="部署单元"
            rules={[
              {
                required: true,
              },
            ]}
            options={['部署单元1', '部署单元2', '部署单元3']}
          />
          <ProFormSelect
            label="部署分组策略"
            name="remark"
            rules={[
              {
                required: true,
              },
            ]}
            initialValue="1"
            options={[
              {
                value: '1',
                label: '策略一',
              },
              { value: '2', label: '策略二' },
            ]}
          />
          <ProFormSelect
            label="Pod 调度策略"
            name="remark2"
            initialValue="2"
            options={[
              {
                value: '1',
                label: '策略一',
              },
              { value: '2', label: '策略二' },
            ]}
          />
        </StepsForm.StepForm>
      </StepsForm>
    </ProCard>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Multiple cards layout

StepsForm multi-card

import {
  ProCard,
  ProForm,
  ProFormCheckbox,
  ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormDigit,
  ProFormSelect,
  ProFormText,
  StepsForm,
} from '@ant-design/pro-components';
import { message } from 'antd';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const Demo = () => {
  return (
    <>
      <StepsForm
        onFinish={async () => {

          await waitTime(1000);
          message.success('Submission successful');
        }}
        formProps={{
          validateMessages: {
            required: 'This field is required',
          },
        }}
      >
        <StepsForm.StepForm
          name="multi-card-step-form-base"
          title="First Step"
          onFinish={async () => {
            await waitTime(2000);
            return true;
          }}
        >
          <ProCard
            title="Source and Target"
            variant="outlined"
            headerBordered
            collapsible
            style={{
              marginBlockEnd: 16,
              minWidth: 800,
              maxWidth: '100%',
            }}
          >
            <ProFormText
              name="name"
              width="md"
              label="Migration Task Name"
              tooltip="Up to 24 characters, used as a unique id"
              placeholder="Please enter a name"
              rules={[{ required: true }]}
            />
            <ProForm.Group title="Nodes" size={8}>
              <ProFormSelect
                width="sm"
                name="source"
                placeholder="Select Source Node"
              />
              <ProFormSelect
                width="sm"
                name="target"
                placeholder="Select Target Node"
              />
            </ProForm.Group>
          </ProCard>

          <ProCard
            title="Top Alignment"
            variant="outlined"
            headerBordered
            collapsible
            style={{
              minWidth: 800,
              marginBlockEnd: 16,
            }}
          >
            <ProFormDigit
              name="xs"
              label="XS Form"
              initialValue={9999}
              tooltip="Tooltip that appears on hover."
              placeholder="Please enter a name"
              width="xs"
            />
            <ProFormText
              name="s"
              label="S Form"
              placeholder="Please enter a name"
              width="sm"
            />
            <ProFormDateRangePicker name="m" label="M Form" />
            <ProFormSelect
              name="l"
              label="L Form"
              fieldProps={{
                mode: 'tags',
              }}
              width="lg"
              initialValue={['Wu Jiahao', 'Zhou Xingxing']}
              options={['Wu Jiahao', 'Zhou Xingxing', 'Chen Lafeng'].map(
                (item) => ({
                  label: item,
                  value: item,
                }),
              )}
            />
          </ProCard>
        </StepsForm.StepForm>
        <StepsForm.StepForm name="multi-card-step-form-checkbox" title="Second Step">
          <ProCard
            style={{
              minWidth: 800,
              marginBlockEnd: 16,
              maxWidth: '100%',
            }}
          >
            <ProFormCheckbox.Group
              name="checkbox"
              label="Migration Type"
              width="lg"
              options={[
                'Structural Migration',
                'Full Migration',
                'Incremental Migration',
                'Full Verification',
              ]}
            />
            <ProForm.Group>
              <ProFormText name="dbname" label="Business DB Username" />
              <ProFormDatePicker
                name="datetime"
                label="Record Retention Time"
                width="sm"
              />
            </ProForm.Group>
            <ProFormCheckbox.Group
              name="checkbox"
              label="Migration Type"
              options={['Complete LOB', 'Do Not Sync LOB', 'Restricted LOB']}
            />
          </ProCard>
        </StepsForm.StepForm>
        <StepsForm.StepForm name="multi-card-step-form-time" title="Third Step">
          <ProCard
            style={{
              marginBlockEnd: 16,
              minWidth: 800,
              maxWidth: '100%',
            }}
          >
            <ProFormCheckbox.Group
              name="checkbox"
              label="Deployment Units"
              rules={[
                {
                  required: true,
                },
              ]}
              options={[
                'Deployment Unit 1',
                'Deployment Unit 2',
                'Deployment Unit 3',
              ]}
            />
            <ProFormSelect
              label="Deployment Group Strategy"
              name="remark"
              rules={[
                {
                  required: true,
                },
              ]}
              width="md"
              initialValue="1"
              options={[
                {
                  value: '1',
                  label: 'Strategy One',
                },
                { value: '2', label: 'Strategy Two' },
              ]}
            />
            <ProFormSelect
              label="Pod Scheduling Strategy"
              name="remark2"
              width="md"
              initialValue="2"
              options={[
                {
                  value: '1',
                  label: 'Strategy One',
                },
                { value: '2', label: 'Strategy Two' },
              ]}
            />
          </ProCard>
        </StepsForm.StepForm>
      </StepsForm>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

StepsForm + Modal

import { PlusOutlined } from '@ant-design/icons';
import {
  ProForm,
  ProFormCheckbox,
  ProFormDatePicker,
  ProFormDateTimePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import { Button, Modal, message } from 'antd';
import { useState } from 'react';

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const Demo = () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Button type="primary" onClick={() => setVisible(true)}>
        <PlusOutlined />
        分步表单新建
      </Button>
      <StepsForm
        onFinish={async () => {

          await waitTime(1000);
          setVisible(false);
          message.success('提交成功');
        }}
        formProps={{
          validateMessages: {
            required: '此项为必填项',
          },
        }}
        stepsFormRender={(dom, submitter) => {
          return (
            <Modal
              title="分步表单"
              width={800}
              onCancel={() => setVisible(false)}
              open={visible}
              footer={submitter}
              destroyOnHidden
            >
              {dom}
            </Modal>
          );
        }}
      >
        <StepsForm.StepForm
          name="modal-step-form-base"
          title="创建实验"
          onFinish={async () => {
            await waitTime(2000);
            return true;
          }}
        >
          <ProFormText
            name="name"
            width="md"
            label="实验名称"
            tooltip="最长为 24 位，用于标定的唯一 id"
            placeholder="请输入名称"
            rules={[{ required: true }]}
          />
          <ProFormDatePicker name="date" label="日期" />
          <ProForm.Group title="时间选择">
            <ProFormDateTimePicker name="dateTime" label="开始时间" />
            <ProFormDatePicker name="date" label="结束时间" />
          </ProForm.Group>
          <ProFormTextArea
            name="remark"
            label="备注"
            width="lg"
            placeholder="请输入备注"
          />
        </StepsForm.StepForm>
        <StepsForm.StepForm name="modal-step-form-checkbox" title="设置参数">
          <ProFormCheckbox.Group
            name="checkbox"
            label="迁移类型"
            width="lg"
            options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
          />
          <ProForm.Group>
            <ProFormText width="md" name="dbname" label="业务 DB 用户名" />
            <ProFormDatePicker
              name="datetime"
              label="记录保存时间"
              width="sm"
            />
            <ProFormCheckbox.Group
              name="checkbox"
              label="迁移类型"
              options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
            />
          </ProForm.Group>
        </StepsForm.StepForm>
        <StepsForm.StepForm name="modal-step-form-time" title="发布实验">
          <ProFormCheckbox.Group
            name="checkbox"
            label="部署单元"
            rules={[
              {
                required: true,
              },
            ]}
            options={['部署单元1', '部署单元2', '部署单元3']}
          />
          <ProFormSelect
            label="部署分组策略"
            name="remark"
            rules={[
              {
                required: true,
              },
            ]}
            width="md"
            initialValue="1"
            options={[
              {
                value: '1',
                label: '策略一',
              },
              { value: '2', label: '策略二' },
            ]}
          />
          <ProFormSelect
            label="Pod 调度策略"
            name="remark2"
            width="md"
            initialValue="2"
            options={[
              {
                value: '1',
                label: '策略一',
              },
              { value: '2', label: '策略二' },
            ]}
          />
        </StepsForm.StepForm>
      </StepsForm>
    </>
  );
};

export default () => (
  <div style={{ padding: 24 }}>
    <Demo />
  </div>
);

Create & edit presets

Create/edit scenario

// Mainly handles the scenarios of creating and editing
import type { ProFormInstance } from '@ant-design/pro-components';
import {
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
  StepsForm,
} from '@ant-design/pro-components';
import type { Dayjs } from 'dayjs';
import React, { useEffect, useRef } from 'react';

import { FIXED_BASE_DATE } from '../../mockData';

type FormValue = {
  jobInfo: {
    name: string;
    type: number;
  };
  syncTableInfo: {
    timeRange: [Dayjs, Dayjs];
    title: string;
  };
};
const formValue: FormValue = {
  jobInfo: {
    name: 'normal job',
    type: 1,
  },
  syncTableInfo: {
    timeRange: [FIXED_BASE_DATE.subtract(1, 'm'), FIXED_BASE_DATE],
    title: 'example table title',
  },
};
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(formValue);
    }, time);
  });
};
const jobType = [
  {
    value: 1,
    label: 'State-owned enterprise',
  },
  {
    value: 2,
    label: 'Private enterprise',
  },
];
const EditExample = () => {
  const formMapRef = useRef<
    React.MutableRefObject<ProFormInstance<any> | undefined>[]
  >([]);
  useEffect(() => {
    waitTime(1000).then(() => {
      // In the editing scenario, you need to use formMapRef to loop through and set formData
      formMapRef?.current?.forEach((formInstanceRef) => {
        formInstanceRef?.current?.setFieldsValue(formValue);
      });
    });
  }, []);

  return (
    <StepsForm
      formMapRef={formMapRef}
      onFinish={() => {

        return Promise.resolve(true);
      }}
    >
      <StepsForm.StepForm name="add-or-edit-step-form-step1" title="Job Information">
        <ProFormText label="Name" name={['jobInfo', 'name']} />
        <ProFormSelect
          label="Job Type"
          name={['jobInfo', 'type']}
          options={jobType}
        />
      </StepsForm.StepForm>
      <StepsForm.StepForm name="add-or-edit-step-form-step2" title={'Sync Table Information'}>
        <ProFormDateRangePicker
          label="Time Range"
          name={['syncTableInfo', 'timeRange']}
        />
        <ProFormText label="Title" name={['syncTableInfo', 'title']} />
      </StepsForm.StepForm>
    </StepsForm>
  );
};
export default () => (
  <div style={{ padding: 24 }}>
    <EditExample />
  </div>
);

StepsForm

Parameters	Description	Type	Default
current	Active step index, starting from `0`	`number`	`0`
onCurrentChange	Fired when `current` changes	`(current: number) => void`	-
onFinish	Last step succeeds; returning a truthy value resets flows back to step 1	`(values: T) => Promise<boolean \| void>`	-
stepsProps	Props forwarded to antd `<Steps>`	`StepsProps`	-
formProps	Common props passed to the inner ProForm	`ProFormProps`	-
stepFormRender	Customize the rendered form body for the active step	`(formDom: ReactNode) => ReactNode`	-
stepsFormRender	Customize the wrapper around the submitter	`(formDom: ReactNode, submitter: ReactNode) => ReactNode`	-
stepsRender	Completely replace the Steps header/footer region	`(steps, dom) => ReactNode`	-
layoutRender	Customize the whole layout; place stepsDom and formDom anywhere	`({stepsDom, formDom}) => ReactNode`	-
formRef	Latest `ProFormInstance` for the visible step	`MutableRefObject<ProFormInstance<any> \| null \| undefined>`	-
stepsFormRef	Steps container ref: merged values, per-step form instance, step jump without validation	`MutableRefObject<StepsFormRef \| null \| undefined>`	-
formMapRef	formMapRef of all step forms	`MutableRefObject<MutableRefObject<FormInstance \| undefined>[]>`	-
allowStepSelect	Whether clicking the step bar switches steps (without triggering validation)	`boolean`	`false`
submitter	Unified submitter config, lower priority than each StepForm's config	`SubmitterProps<{step,onPre,form}> \| false`	-
containerStyle	Container style	`React.CSSProperties`	-

StepForm

Exactly the same as ProForm, except that onFinish supports Promise, so if it returns false, it won't jump to the next step.

Parameters	Description	Type	Default
onFinish	Form submit success trigger	`(values: T) => Promise<boolean \| void> \| void`	-

#StepsForm

#Basic step flow

#Vertical steps layout

#Custom step actions

#Multiple cards layout

#Embedded in Modal

#Create & edit presets

#StepsForm

#StepForm

StepsForm

Basic step flow

Vertical steps layout

Custom step actions

Multiple cards layout

Embedded in Modal

Create & edit presets

StepsForm

StepForm