步骤条
Stepper
别名:分步表单第几步那个进度步骤指示器wizard steps
这是什么
用有序节点展示任务的阶段、当前位置和已完成步骤的进度组件。它通常与分步表单配合，把较长任务拆成易理解的阶段。步骤条负责说明进度，下一步和上一步负责推进流程；进入下一步前应校验当前输入，返回时应保留已经填写的信息。
名词辨析
Stepper 一名两义：既指数值加减输入框（Input Stepper / Number Input），也指多步流程指示（Progress Stepper）。看场景选词：改数字用前者，看进度用后者。
交互实验室
试一试，再决定怎么用先尝试空名称继续，再填写名称，选择用途，回到上一步检查内容是否保留。
正在加载实验室…
使用时关注什么
- 01错误输入阻止前进，同时给出可修正的提示。
- 02回退保留数据，最后一步显示完整确认信息。
✓ 适用场景
- 注册、配置、结账等有明确顺序的任务。
- 用户需要了解剩余工作量的多步操作。
✕ 不适用场景
- 步骤只有一项，或可以同时完成所有字段。
- 流程会频繁分叉且无法预测总步骤数。
常见形式
水平步骤
Horizontal
桌面空间充足时横向显示进度。
垂直步骤
Vertical
窄屏或较长步骤标题使用纵向结构。
实现要点
display: flexaria-current="step"gap用 ol 表示有序阶段，用 aria-current="step" 标记当前位置。表单值由流程持有，不能在回退时丢失。校验失败留在原步骤并解释原因；完成状态应有明确文字。
相关概念
容易混淆
多步表单Wizard
Wizard 是分步表单流程本身；Stepper（进度义）只是它的指示器。
滑块Slider
Slider 在连续区间取值，Input Stepper 按固定步长加减。
分页Pagination
Pagination 切换数据页，Stepper 推进任务步骤。