Questionnaire

在对话中逐题提问：斜体的问题，下方是逐行排列的选项或输入框，最后是 Previous、Skip 与 Next 三个按钮。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/questionnaire

示例

出发前的三个问题

questionnaire-dispatch.tsx

import { useState } from "react";import {  Questionnaire,  QuestionnaireActions,  QuestionnaireChoice,  QuestionnaireChoiceDescription,  QuestionnaireChoices,  QuestionnaireDescription,  QuestionnaireError,  QuestionnaireInput,  QuestionnaireItem,  QuestionnaireNext,  QuestionnairePrevious,  QuestionnaireProgress,  QuestionnaireSkip,  QuestionnaireSubmit,  QuestionnaireTitle,} from "@/components/zero/questionnaire";export default function QuestionnaireDispatch() {  const [sent, setSent] = useState("");  return (    <Questionnaire      className="max-w-md"      shortcuts="letters"      onSubmit={(event) => {        event.preventDefault();        const data = new FormData(event.currentTarget);        setSent(`${data.get("route")} · ${data.getAll("cargo").join(", ")}`);      }}    >      <QuestionnaireProgress />      <QuestionnaireItem name="route" required>        <QuestionnaireTitle>Which way to the north gate?</QuestionnaireTitle>        <QuestionnaireDescription>          Gate 4 is shut tonight.        </QuestionnaireDescription>        <QuestionnaireChoices>          <QuestionnaireChoice value="canal">            The canal            <QuestionnaireChoiceDescription>              18 minutes            </QuestionnaireChoiceDescription>          </QuestionnaireChoice>          <QuestionnaireChoice value="tower">            Past Tower 9            <QuestionnaireChoiceDescription>              24 minutes, quieter            </QuestionnaireChoiceDescription>          </QuestionnaireChoice>        </QuestionnaireChoices>        <QuestionnaireError>Pick a way.</QuestionnaireError>      </QuestionnaireItem>      <QuestionnaireItem name="cargo" multiple>        <QuestionnaireTitle>What else are you carrying?</QuestionnaireTitle>        <QuestionnaireChoices>          <QuestionnaireChoice value="parcels">Parcels</QuestionnaireChoice>          <QuestionnaireChoice value="cold-box">A cold box</QuestionnaireChoice>          <QuestionnaireChoice value="nothing">            Nothing else          </QuestionnaireChoice>        </QuestionnaireChoices>      </QuestionnaireItem>      <QuestionnaireItem name="note">        <QuestionnaireTitle>A note for the gate?</QuestionnaireTitle>        <QuestionnaireInput placeholder="Optional" />      </QuestionnaireItem>      <QuestionnaireActions>        <QuestionnairePrevious />        <QuestionnaireSkip />        <QuestionnaireNext />        <QuestionnaireSubmit>Send</QuestionnaireSubmit>      </QuestionnaireActions>      {sent ? (        <p className="font-medium font-zero-text text-zero-accent text-zero-sm">          Sent: {sent}        </p>      ) : null}    </Questionnaire>  );}

行为

每个选项行带一个方框，框内的斜切凹槽在选中时以强调色填充：多选题显示对勾，单选题显示斜切块。设置 shortcuts 后，每行显示选择该项所用的按键。必答题未作答时，以红色文字提示。

底层是 @shadcn/react 的 questionnaire，本身即是一个表单：提交时读取答案即可。

属性

Questionnaire

属性	类型	默认值	说明
shortcuts	"letters" \| "numbers"	—	为每个选项分配一个选择按键。

QuestionnaireItem

属性	类型	默认值	说明
name	string	—	答案在表单中的字段名。
required	boolean	false	不可跳过。
multiple	boolean	false	允许多选。

QuestionnaireProgress, QuestionnaireTitle, QuestionnaireDescription, QuestionnaireChoices, QuestionnaireChoice, QuestionnaireInput, QuestionnaireError, QuestionnaireActions, QuestionnairePrevious, QuestionnaireSkip, QuestionnaireNext, QuestionnaireSubmit