Questions

Collect structured answers before continuing.

What should we build?

Your answer

Send answers

View code

import { useState } from "react";
import { Questions, type QuestionAnswers } from "@stack/ui/questions";

export default function Example() {
  const [answers, setAnswers] = useState<QuestionAnswers>({});
  const [answered, setAnswered] = useState(false);
  return (
    <Questions.Root
      questions={[{ id: "goal", title: "What should we build?" }]}
      answers={answers}
      onAnswerChange={(id, answer) =>
        setAnswers((current) => ({ ...current, [id]: answer }))
      }
      status={answered ? "answered" : "pending"}
      onSubmit={() => setAnswered(true)}
    >
      {answered ? (
        <Questions.Summary />
      ) : (
        <>
          <Questions.Item id="goal" />
          <Questions.Error />
          <Questions.Submit />
        </>
      )}
      <Questions.Status />
    </Questions.Root>
  );
}

Usage

import { useState } from "react";
import { Questions, type QuestionAnswers } from "@stack/ui/questions";

Add Progress, Previous, and Next for multiple questions. Adapter exports can translate Codex requests into this component’s question data.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

Questions.Root

Also accepts native element props.

Prop	Type	Required	Description
className	string	No	Additional CSS classes for the underlying element.
children	ReactNode	No	Content rendered inside the component.
questions	readonly Question[]	Yes	Questions to render.
answers	Readonly<Record<string, QuestionAnswer | undefined>>	Yes	Current answers keyed by question ID.
onAnswerChange	(id: string, answer: QuestionAnswer) => void	Yes	Update the answer for a question.
onSubmit	(answers: QuestionAnswers) => Promise<void> | void	Yes	Handle submission.
status	QuestionStatus	No	Current operation status. Default: "pending".
disabled	boolean	No	Disable interaction. Default: false.

Questions.Item

Prop	Type	Required	Description
id	string	Yes	Element identifier.
renderTitle	((title: string) => ReactNode)	No	Customize the displayed title.

Questions.Progress

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.
render	(ReactElement<unknown, string | JSXElementConstructor<any>> | ((props: Record<string, unknown>, state: { current: number; first: boolean; last: boolean; total: number; }) => ReactElement | null))	No	Replace the underlying element using render composition.

Questions.Previous

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.
render	(ReactElement<unknown, string | JSXElementConstructor<any>> | ((props: Record<string, unknown>, state: { disabled: boolean; shortcut: "Enter" | null; status: QuestionnaireItemStatus | null; visible: boolean; }) => ReactElement | null))	No	Replace the underlying element using render composition.

Questions.Next

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.
render	(ReactElement<unknown, string | JSXElementConstructor<any>> | ((props: Record<string, unknown>, state: { disabled: boolean; shortcut: "Enter" | null; status: QuestionnaireItemStatus | null; visible: boolean; }) => ReactElement | null))	No	Replace the underlying element using render composition.

Questions.Submit

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.
render	(ReactElement<unknown, string | JSXElementConstructor<any>> | ((props: Record<string, unknown>, state: { disabled: boolean; shortcut: "Enter" | null; status: QuestionnaireItemStatus | null; visible: boolean; }) => ReactElement | null))	No	Replace the underlying element using render composition.

Questions.Error

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.

Questions.Summary

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.
renderTitle	((title: string) => ReactNode)	No	Customize the displayed title.
renderAnswer	((answer: string) => ReactNode)	No	Customize the displayed answer.

Questions.Status

Also accepts native element props.

Prop	Type	Required	Description
children	ReactNode	No	Content rendered inside the component.