Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Questionnaire

A sequence of form questions with selection, validation and progress.

CoreAdvanced Inputs@gaudi/design-system/core/QuestionnaireView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Questionnaire } from '@gaudi/design-system/core/Questionnaire';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/questionnaire-answer-types.json.

Usage

import { Questionnaire, QuestionnaireItem, QuestionnaireTitle, QuestionnaireInput, QuestionnaireActions, QuestionnaireSubmit } from '@gaudi/design-system/core/Questionnaire';
<Questionnaire onSubmit={submitAnswers}>  <QuestionnaireItem name='goal'>    <QuestionnaireTitle>What would you like to achieve?</QuestionnaireTitle>    <QuestionnaireInput placeholder='Your goal' />  </QuestionnaireItem>  <QuestionnaireActions><QuestionnaireSubmit>Submit</QuestionnaireSubmit></QuestionnaireActions></Questionnaire>

Examples

Answer types

Storybook

Conditional branch

Storybook

Cross-question validation

Storybook

Guided setup

Storybook

API

8 props

Accessibility

Question titles render as legends. Keep validation beside the question and ensure Previous, Next and Submit have clear names.

CardCard frames reusable content with title, subtitle, and optional children.8 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesPillPill renders compact category and status labels.4 examplesFieldField composes form label, description, error, and input building blocks.7 examples