Questionnaire
Multi-step form with single and multiple choice option cards, progress and keyboard accessible radio and checkbox semantics.
pnpm dlx @glinui/cli@latest add questionnaireStep 1 of 2, account setup
Tell us about your project
Installation
pnpm dlx @glinui/cli@latest add questionnairePrefer the package?
Usage
Glass (opt-in)
Glass is opt-in and needs a backdrop behind it. Switch the preview stage to Vivid or Photo to see the frosted surface.
import { Questionnaire } from "@glinui/ui"
// Same questions as aboveexport function Demo() { return <Questionnaire variant="glass" questions={questions} />}Accessibility
- Options are native radio or checkbox inputs inside labels, so arrow keys, Space and screen reader semantics come for free.
- Single choice is a radiogroup named by the question; multiple choice is a labelled fieldset.
- Progress is a progressbar with aria-valuetext like "Step 2 of 3".
- Focus moves to the new question heading after Back or Next.
Keyboard Interactions
| Key | Action |
|---|---|
| Arrow keys | Move between radio options. |
| Space | Select an option or toggle a checkbox. |
| Enter | Next, or submit on the last step. |
ARIA Attributes
- `role="radiogroup"` for single choice
- `role="progressbar"` with `aria-valuetext`
Reduced Motion
Progress and card transitions are disabled under reduced motion.
Affected properties
widthborder-colorbackground-colorAPI Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
questions | QuestionnaireQuestion[] | Yes | - | id, title, description, type (single | multiple), options, required. |
onSubmit | (answers: QuestionnaireAnswers) => void | No | - | Called on the last step with every answer. |
onStepChange | (index: number) => void | No | - | Fires when Back or Next changes the step. |
defaultAnswers | QuestionnaireAnswers | No | - | Preselected values. |
submitLabel | string | No | "Submit" | Label of the final button. |
variant | SurfaceVariant | "default" | "raised" | "frosted" | No | ambient (glinr) | Surface variant. Omit to follow the ambient design style (glinr by default, plain for minimal, glass for glass). |
tone | SurfaceTone | No | neutral | Colour tone for the vocabulary variants. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Import
import { Questionnaire } from "@glinui/ui"Source Files
Dependencies
@glinui/ui@phosphor-icons/reactclass-variance-authorityGenerated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/questionnaire.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata
Primary Props Type
QuestionnaireProps
QuestionnaireProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
defaultAnswers | QuestionnaireAnswers | No | - | - |
onStepChange | (index: number) => void | No | - | - |
onSubmit | (answers: QuestionnaireAnswers) => void | No | - | - |
questions | QuestionnaireQuestion[] | Yes | - | - |
submitLabel | string | No | "Submit" | - |
tone | SurfaceTone | No | - | - |
variant | SurfaceVariant | "default" | "raised" | "frosted" | No | - | Visual variant. Omit for the ambient design style (glinr by default). Vocabulary: glinr, solid, plain, soft, outline, ghost, gradient, glass. |