Sophic Interface Systems
Components

Questionnaire

One question at a time, with choices and next, back, and submit.

Question 1 of 1
What should we prototype next?

Choose one direction.

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

On this page