tarve
Docs GitHub

Questionnaire

A step-by-step form with text, single and multiple choice.

QuestionnaireProps packages/core/src/advanced-controls.ts:323 ↗

Import

import { Questionnaire } from "@tarve/core";

Usage

Questionnaire.tsx
import { Questionnaire, type QuestionnaireAnswer } from "@tarve/core";

let current = 0;
let values: Record<string, QuestionnaireAnswer | undefined> = {};

<Questionnaire
  current={current}
  values={values}
  questions={[
    { id: "name", title: "What's your name?", type: "text", required: true },
    {
      id: "runtime",
      title: "Favourite runtime?",
      type: "single",
      options: [
        { value: "bun", label: "Bun" },
        { value: "node", label: "Node" },
      ],
    },
  ]}
  onCurrentChange={(index) => {
    current = index;
  }}
  onValueChange={(id, value) => {
    values = { ...values, [id]: value };
  }}
  onSubmit={() => console.log(values)}
/>

Props

PropTypeDefault
current required number—
questions required readonly QuestionnaireQuestion[]—
values required Readonly<Record<string, QuestionnaireAnswer | undefined>>—
nextLabel string"Next"
onCurrentChange (index: number) => void—
onSubmit () => void—
onValueChange (questionId: string, value: QuestionnaireAnswer) => void—
previousLabel string"Previous"
submitLabel string"Submit"

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

QuestionnaireAnswer
type QuestionnaireAnswer = string | string[];
QuestionnaireQuestion
interface QuestionnaireQuestion {
  id: string;
  title: string;
  description?: string;
  type: "text" | "single" | "multiple";
  options?: readonly RadioOption[];
  required?: boolean;
  placeholder?: string;
}