Questionnaire / Clarifying Questions

Agent-led structured questions, one at a time, with progress, skip/back and a summary the agent can act on.

Import

import { Questionnaire } from '@marbleui/ui'

Props

<Questionnaire>

Prop	Type	Default
questions *required	`Question[]`	`—`
className	`string`	`—`
onComplete	`(answers: Record<string, unknown>) => void`	`—`
title	`string`	`'A few questions first'`

Usage notes

Questions an agent asks before starting work, one per screen, with progress, Back/Skip and a review summary. When all fields should be visible at once, use Form.

<Questionnaire
  title="Set up your report agent"
  questions={[
    { id: 'audience', kind: 'single', prompt: 'Who reads the report?', options: ['Leadership', 'My team', 'Customers'] },
    { id: 'detail', kind: 'scale', prompt: 'How detailed?', min: 'Headline only', max: 'Deep dive' },
  ]}
  onComplete={(answers) => startAgent(answers)}
/>

Kinds: single (card radios), multi (checkboxes), text and scale (always 1–5; min/max are end labels). Answers are keyed by question id.
Nothing is required: unanswered questions are missing from answers (the summary shows “—”), so validate in onComplete.
onComplete fires from the summary’s Start button once; pressing it again does nothing until the user goes Back. Answers can’t be prefilled or reset except by remounting.
Next, Review and Start are one button, so focus stays on it; when Skip disappears on the summary or Back disables on the first question, focus moves to it. Only text questions autofocus.

Example source · show

import { Questionnaire } from './questionnaire'

export const styles = { 'Agent setup': () => <Questionnaire title="Let’s set up your report agent" questions={[
  { id: 'audience', kind: 'single', prompt: 'Who reads the report?', options: ['Leadership', 'My team', 'Customers'] },
  { id: 'sources', kind: 'multi', prompt: 'Which sources should it use?', options: ['Stripe', 'HubSpot', 'Product analytics', 'Support tickets'] },
  { id: 'detail', kind: 'scale', prompt: 'How detailed?', min: 'Headline only', max: 'Deep dive' },
  { id: 'notes', kind: 'text', prompt: 'Anything to always include?', placeholder: 'e.g. churn by plan, top 3 risks' },
]} /> }

Source: packages/ui/src/questionnaire/questionnaire.tsx

Catalog