Questionnaire

Clarifying questions from the agent, one at a time: single choice, multiple choice with Other, and free text, with Skip, a stepper and a summary before sending.

Markdown

On this page

Single choice, multiple choice with Other, and free text, then a summary before sending.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/questionnaire.json

Usage

tsx

import { Questionnaire } from "@/components/ui/chatcn/questionnaire"

<Questionnaire
  title="A few questions before I add CSV export"
  questions={[
    { id: "scope", type: "single", title: "Which runs?", options: [...] },
    { id: "columns", type: "multi", title: "Which columns?", options: [...], allowOther: true },
    { id: "notes", type: "text", title: "Anything else?" },
  ]}
  onSubmit={(answers) => sendToAgent(answers)}
/>

Use describeAnswer(question, answer) to turn an answer into one readable line for the model. Set submitted after sending to collapse the card into a read-only summary.

Examples

Answered

The compact read-only state after the answers are sent.

Props

Prop	Type	Notes
`questions`	`QuestionnaireQuestion[]`	`{ id, type, title, description?, options?, allowOther?, placeholder?, required? }`
`value`, `defaultValue`, `onValueChange`	`QuestionnaireAnswers`	Controlled or uncontrolled
`onSubmit`	`(answers) => void`	From the summary step
`onDismiss`	`() => void`	Shows Skip all
`submitted`	`boolean`	Compact read-only state
`title`, `submitLabel`		Header text and final button label

Keyboard

Key	Action
`ArrowUp`, `ArrowDown`	Move between choices
`1` to `9`	Pick a choice
`Enter`	Pick the focused choice, or go on once answered
`Shift+Enter` in text	New line. Enter never fires during IME composition

Accessibility

Single choice is a radiogroup of radio buttons with a roving tab stop; multiple choice is a group of checkbox buttons.
The 1 of 3 counter is a polite live region. Stepper segments are buttons named Question 2, answered.
The card never steals focus on mount. Focus follows the step only when it was already inside.

Motion

Steps changed with the pointer slide 8 px in their direction with a 180 ms fade. Steps changed with the keyboard swap instantly.
Choice indicators fill over 150 ms. Under reduced motion only the fade remains.