Questionnaire

Questions asked one at a time in a conversation: a leaning question, its choices as rows, or a field to type in, then Previous, Skip and Next.

Install

terminal

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

Examples

Three questions before the run

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>  );}

Behaviour

A choice row is a square box with a slanted well that fills with the accent: a check for several answers, a slab for one. With shortcuts, each row shows the key that picks it. A required question says so in red when left empty.

It is @shadcn/react's questionnaire underneath, a form: read the answers on submit.

Props

Questionnaire

Prop	Type	Default	Description
shortcuts	"letters" \| "numbers"	—	A key to pick each choice.

QuestionnaireItem

Prop	Type	Default	Description
name	string	—	The answer's name in the form.
required	boolean	false	Cannot be skipped.
multiple	boolean	false	Several choices at once.

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