Skip to content
MIZU.

SIG—12 Signature system

Interview

A conversation instead of a form: one question at a time, letter keys for choices, branching, a review before sending and an honest submit.

Live — this one is real

Network

Illustrative onboarding. Letters answer choices, Y/N answers yes-or-no, digits pick a score, Enter continues. Answering “no” to the design-system question skips its follow-up.

Set up your studio in a minute.

Eight short questions. You can go back at any point, and nothing is sent until you review it.

8 questions · Enter ↵ to continue

onAnswersChange
{}

Usage

tsx
import { Interview } from "mizu-ui";

export function Example() {
  return (
    <Interview
      label="Feedback"
      onSubmit={(answers) =>
        localStorage.setItem("mizu-feedback", JSON.stringify(answers))
      }
      questions={[
        {
          id: "role",
          title: "What do you do most days?",
          type: "choice",
          required: true,
          options: [
            { value: "design", label: "Design" },
            { value: "code", label: "Engineering" },
          ],
        },
        {
          id: "score",
          title: "How was your week?",
          type: "scale",
          min: 1,
          max: 5,
        },
        { id: "note", title: "Anything else?", type: "long" },
      ]}
    />
  );
}

This code, running — no configuration beyond the data

What do you do most days? *

Press A–B

Keyboard

Enter
Continue (Ctrl + Enter in long answers)
ABC…
Choose an option; multiple choice toggles
YN
Answer a yes-or-no question
1…90
Pick a score (0 is ten)

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source and styles into your configured UI directory.

sh
npx shadcn@latest add 0xuser64bit/mizu/interview

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion.

Inspect signature/Interview.tsx

Source is included in the npm package under src/signature/Interview.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
label / questionsstring / InterviewQuestion[]—id, title, description, type (text, long, email, number, choice, multi, scale, yesno), options, required, min, max, validate and next.
answers / defaultAnswers / onAnswersChangeRecord<string, InterviewAnswer>—Answers by question id.
onSubmit(answers) => void | Promise—Resolve to finish; throw to keep everything and offer a retry.
intro / done{ title, body, start } / ReactNode—Optional welcome screen and the completion message.
submitLabelstring"Send answers"The review screen's action.

Accessibility

Each question is a labelled form; focus moves to its first field. Choices are real radio or checkbox groups with letter shortcuts as an enhancement; the scale is a radio group. Errors are alerts linked to the field. Progress is a progressbar, and each new question, the review and the result are announced.

Motion

Questions rise in going forward and settle downward going back. A single choice blinks twice to confirm and moves on by itself; a rejected answer shakes once. The progress hairline stretches and a diamond seal turns into place when it is sent. Reduced motion keeps every state without travel or blinking.

Works alongside

ChronicleTrendChartWaveformPlane