Browse components

Questionnaire

Multi-step questions with single, multiple, and freeform answers.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/questionnaire.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/questionnaire.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/questionnaire.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/questionnaire.

Import

import {  Questionnaire,  QuestionnaireActions,  QuestionnaireChoice,  QuestionnaireChoices,  QuestionnaireItem,  QuestionnaireNext,  QuestionnairePrevious,  QuestionnaireProgress,  QuestionnaireSubmit,  QuestionnaireTitle} from "@/components/ui/questionnaire"

example.tsx

import {  Questionnaire,  QuestionnaireActions,  QuestionnaireChoice,  QuestionnaireChoices,  QuestionnaireItem,  QuestionnaireNext,  QuestionnairePrevious,  QuestionnaireProgress,  QuestionnaireSubmit,  QuestionnaireTitle,} from "@/components/ui/questionnaire"export function Example() {  return (    <Questionnaire      items={[{ name: "direction", required: true, choices: [{ value: "timeline" }] }]}      onSubmit={(event) => event.preventDefault()}    >      <QuestionnaireProgress />      <QuestionnaireItem name="direction" required>        <QuestionnaireTitle>What next?</QuestionnaireTitle>        <QuestionnaireChoices>          <QuestionnaireChoice value="timeline">Timeline</QuestionnaireChoice>        </QuestionnaireChoices>      </QuestionnaireItem>      <QuestionnaireActions>        <QuestionnairePrevious />        <QuestionnaireNext />        <QuestionnaireSubmit />      </QuestionnaireActions>    </Questionnaire>  )}

API Reference

Questionnaire

Root from `@shadcn/react/questionnaire`.

Prop	Type	Default
items	QuestionnaireItemConfig[]	—
shortcuts	"letters" \| boolean	—

QuestionnaireItem

Prop	Type	Default
name	string	—
required	boolean	—
multiple	boolean	—

Notes

Also exports `QuestionnaireDescription`, `QuestionnaireError`, `QuestionnaireInput`, `QuestionnaireSkip`, and `QuestionnaireChoiceDescription`.