Components
Questionnaire
One question at a time, with choices and next, back, and submit.
Usage
import {
Questionnaire,
QuestionnaireActions,
QuestionnaireChoice,
QuestionnaireChoices,
QuestionnaireItem,
QuestionnaireNext,
QuestionnairePrevious,
QuestionnaireProgress,
QuestionnaireSubmit,
QuestionnaireTitle,
} from "@sophic/portal-ui";<Questionnaire
items={[{ name: "direction", required: true, choices: [{ value: "a" }] }]}
onSubmit={(event) => event.preventDefault()}
>
<QuestionnaireProgress />
<QuestionnaireItem name="direction" required>
<QuestionnaireTitle>What should we prototype next?</QuestionnaireTitle>
<QuestionnaireChoices>
<QuestionnaireChoice value="a">Delegation</QuestionnaireChoice>
</QuestionnaireChoices>
</QuestionnaireItem>
<QuestionnaireActions>
<QuestionnairePrevious />
<QuestionnaireNext />
<QuestionnaireSubmit />
</QuestionnaireActions>
</Questionnaire>multiple on an item uses checkboxes. A required item stays on the question
until an answer is chosen. Skip appears only when the item is not required.
Changelog
- 4 October 2026 — Choice cards bind
--choice-bg*; rest has no outline, checked uses--outer-border-strong, focus is the field ring. Full notes - 30 September 2026 — Spacing and type use the shared tokens. Full notes
- 30 September 2026 — Added. Full notes