Questionnaire
Questions presented one step at a time.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Questionnaire
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/questionnaire.json'Usage
A complete example using the installed component and hook paths.
Questionnaire usage
"use client";type PreviewProps = { interactive?: boolean };import { useState } from "react";import { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoices, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSubmit, QuestionnaireTitle } from "@/components/ui/questionnaire";function QuestionnairePreview({ interactive }: PreviewProps) { const [submitted, setSubmitted] = useState(false); return ( <div className="w-full max-w-72 space-y-2"> <Questionnaire onSubmit={(event) => { event.preventDefault(); if (interactive) setSubmitted(true); }} > <QuestionnaireProgress>Questionnaire</QuestionnaireProgress> <QuestionnaireItem name="format" required> <QuestionnaireTitle>Which format do you prefer?</QuestionnaireTitle> <QuestionnaireChoices> <QuestionnaireChoice value="short">Short updates</QuestionnaireChoice> <QuestionnaireChoice value="detailed">Detailed updates</QuestionnaireChoice> </QuestionnaireChoices> <QuestionnaireActions> <QuestionnaireNext>Next</QuestionnaireNext> </QuestionnaireActions> </QuestionnaireItem> <QuestionnaireItem name="frequency" required> <QuestionnaireTitle>How often?</QuestionnaireTitle> <QuestionnaireChoices> <QuestionnaireChoice value="weekly">Weekly</QuestionnaireChoice> <QuestionnaireChoice value="monthly">Monthly</QuestionnaireChoice> </QuestionnaireChoices> <QuestionnaireActions> <QuestionnairePrevious>Back</QuestionnairePrevious> <QuestionnaireSubmit>Finish demo</QuestionnaireSubmit> </QuestionnaireActions> </QuestionnaireItem> </Questionnaire> {submitted && ( <output className="block text-xs text-muted-foreground"> Demo answers complete; nothing was sent. </output> )} </div> );}export default function Demo() { return <QuestionnairePreview interactive />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Questionnaire
Questionnaire props
React.ComponentProps<typeof QuestionnairePrimitive.Root>QuestionnaireActions
QuestionnaireActions props
React.ComponentProps<"div">QuestionnaireChoice
QuestionnaireChoice props
React.ComponentProps<typeof QuestionnairePrimitive.Choice> & { sound?: boolean }- sound
- true
QuestionnaireChoiceDescription
QuestionnaireChoiceDescription props
React.ComponentProps<"span">QuestionnaireChoices
QuestionnaireChoices props
React.ComponentProps<typeof QuestionnairePrimitive.Choices>QuestionnaireDescription
QuestionnaireDescription props
React.ComponentProps<typeof QuestionnairePrimitive.Description>QuestionnaireError
QuestionnaireError props
React.ComponentProps<typeof QuestionnairePrimitive.Error>QuestionnaireInput
QuestionnaireInput props
React.ComponentProps<typeof QuestionnairePrimitive.Input>QuestionnaireItem
QuestionnaireItem props
React.ComponentProps<typeof QuestionnairePrimitive.Item>QuestionnaireNext
QuestionnaireNext props
React.ComponentProps<typeof QuestionnairePrimitive.Next> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">- size
- "default"
- variant
- "default"
QuestionnairePrevious
QuestionnairePrevious props
React.ComponentProps<typeof QuestionnairePrimitive.Previous> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">- size
- "default"
- variant
- "outline"
QuestionnaireProgress
QuestionnaireProgress props
React.ComponentProps<typeof QuestionnairePrimitive.Progress>QuestionnaireSkip
QuestionnaireSkip props
React.ComponentProps<typeof QuestionnairePrimitive.Skip> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">- size
- "default"
- variant
- "outline"
QuestionnaireSubmit
QuestionnaireSubmit props
React.ComponentProps<typeof QuestionnairePrimitive.Submit> & Pick<React.ComponentProps<typeof Button>, "size" | "variant">- size
- "default"
- variant
- "default"
QuestionnaireTitle
QuestionnaireTitle props
React.ComponentProps<typeof QuestionnairePrimitive.Title>