COMPONENT 87 · Text & File Inputs
分步问卷
Questionnaire
也叫Step Form引导式问卷多步表单
按步骤收集回答，并在前后切换时保留选择。
Collect answers step by step while preserving previous responses.
ANATOMY & USAGE
结构与使用建议
组成部分
- 当前问题
- 回答选项
- 步骤操作
适合使用
- 逐步收集偏好、需求或引导信息，降低同屏负担。
不建议使用
- 需要同时比较所有问题时使用完整表单。
键盘与无障碍
- 每题用 fieldset/legend 关联选项，切步时将焦点移到新问题。
- 保留已填答案并提供上一步，完成后展示结果；首次加载不抢焦点。
参考 shadcn/ui · Questionnaire ↗核对于 2026-09-05
DESCRIBE IT TO AI
这样告诉编程助手
实现分步问卷（Questionnaire）：按步骤收集回答，并在前后切换时保留选择。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="modern-demo">
<p id="step"></p>
<fieldset class="modern-options">
<legend tabindex="-1" id="question"></legend>
<div id="answers"></div>
</fieldset>
<div class="modern-actions">
<button id="back">上一步</button><button id="next">下一步</button>
</div>
<p id="summary" role="status"></p>
</section>
<script src="script.js" defer></script>
</body>
</html>