Question

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add question

Usage#

Anatomy#

A header that says who is asking, the title with the question itself, the content that folds away once you reply (options, steps, actions) and the answer receipt that opens in its place. Keep the title outside the content and it stays as the receipt's heading.

import {
  Question,
  QuestionHeader,
  QuestionIcon,
  QuestionLabel,
  QuestionStepper,
  QuestionTitle,
  QuestionContext,
  QuestionContent,
  QuestionSteps,
  QuestionStep,
  QuestionOptions,
  QuestionOption,
  QuestionOther,
  QuestionActions,
  QuestionSkip,
  QuestionBack,
  QuestionSubmit,
  QuestionAnswer,
} from "@/components/ui/question"

<Question>
  <QuestionHeader>
    <QuestionIcon />
    <QuestionLabel />
    <QuestionStepper />
  </QuestionHeader>
  <QuestionContent>
    <QuestionSteps>
      <QuestionStep>
        <QuestionTitle />
        <QuestionContext />
        <QuestionOptions>
          <QuestionOption />
          <QuestionOther />
        </QuestionOptions>
      </QuestionStep>
    </QuestionSteps>
    <QuestionActions>
      <QuestionSkip />
      <QuestionBack />
      <QuestionSubmit />
    </QuestionActions>
  </QuestionContent>
  <QuestionAnswer />
</Question>

Single and multiple#

type="single" is a radio group: arrows move the pick, and the row's number key turns into a check. type="multiple" is a toggle group with a checkbox per row, so it reads as “pick any” before you touch it. A picked row is a faint chip in full ink, never the brand color.

Your own answer#

QuestionOther is the escape hatch for when none of the options fit. Picking it opens a field in place, right under the row, and the typed text goes back in place of the option. Submit stays disabled while the field is empty.

Several questions#

Wrap each question in a QuestionStep inside QuestionSteps. The header's stepper counts them, Next becomes Submit on the last one, and the frame tweens to each step's height so the change registers. onSubmit gets one key per step.

States#

Four states. Asking is the open card. Once answered, skipped or expired, the content folds away, the icon turns into a check, a forward arrow or an hourglass, and the receipt opens in its place. Expired is yours to set, when the agent stops waiting and goes on without you.

Receipts#

A flow's receipt is a row per step, named by the step's label. Pass the stored answer as defaultValue with status="answered" to rebuild it from chat history; the options mount folded, so the receipt still reads their labels.

In a chat#

Inside a Chat turn, use variant="plain". It drops the frame, so the question reads as part of the answer, and the header can go too: the message already says who is asking.

Density#

Like Plan and Tool, Question reads the density context (or a density prop). It tunes the frame's padding and the option rows, which follow DropdownMenu's heights at each density.

Keyboard#

Arrow keys move between options. 1 to 9 pick the option with that number from anywhere in the question, outside the text field. Enter on an option or in the Other field submits, or goes to the next step. Space toggles a row in a multiple question. Typing on a picked Other row jumps into its field.

API reference#

FAQ#