Questionnaire

Multi-step single/multiple/freeform

A short survey, one question at a time — onboarding questions, feedback, a quiz. For a form people fill in at once, use Form with Fields.

It handles the step header, the input for each question type, required answers, skipping and the progress bar; answers collect into one object bound with v-model. For a wizard with arbitrary panels, Stepper.

Basic

1 / 3

Who is the main heroine?

One answer.

1Megumiflat, but…2Eriri3Utaha

{}

<script setup lang="ts">
import { ref } from "vue";
import { BlessQuestionnaire, type BlessAnswers, type BlessQuestion } from "blessing-ui";
const questions: BlessQuestion[] = [
  {
    name: "heroine",
    title: "Who is the main heroine?",
    description: "One answer.",
    type: "single",
    choices: [
      { value: "megumi", label: "Megumi", description: "flat, but…" },
      { value: "eriri", label: "Eriri" },
      { value: "utaha", label: "Utaha" },
    ],
  },
  {
    name: "watched",
    title: "Which have you watched?",
    type: "multiple",
    choices: [
      { value: "s1", label: "Season 1" },
      { value: "s2", label: "♭" },
      { value: "fine", label: "Fine" },
    ],
  },
  {
    name: "note",
    title: "Anything else?",
    type: "freeform",
    skippable: true,
    required: false,
    placeholder: "optional",
  },
];
const answers = ref<BlessAnswers>({});
const submitted = ref<BlessAnswers>();
</script>

<template>
  <div class="col" style="max-width: 480px">
    <BlessQuestionnaire v-model="answers" :questions @submit="submitted = $event" />
    <pre style="font-size: 12px; margin: 0">{{ submitted ?? answers }}</pre>
  </div>
</template>

• Questions are single, multiple or freeform; required (default) blocks Next with a message. On each step focus moves to the new question, so it is read.
• With shortcuts, 1–9 pick choices (Ctrl / ⌘ / Alt + digit stay with the browser).

Usage

import { BlessQuestionnaire } from "blessing-ui";

API

Props

Name	Type	Default	Description
questions*	BlessQuestion[]	—
shortcuts	boolean	true	1-based shortcut keys for choices
labels	Partial<{ next: string; previous: string; skip: string; submit: string; required: string; }>	—
modelValue	BlessAnswers	{}
step	number	0

Events

Name	Payload	Description
update:modelValue	[value: BlessAnswers]
submit	[answers: BlessAnswers]
skip	[question: BlessQuestion]
update:step	[value: number]