Question / options card

A clarifying-question surface the assistant uses when it needs the user to choose. Numbered, keyboard-first option rows (1–9 to select, ↑/↓ to move, Enter to submit), an optional free-text 'Other', and single or multi-step (wizard) modes.

Included in the single kansho full pack. Components are not offered as separate installs.

Single — fraction progress, with 'Other'

Static preview: selection is live locally, but Submit, Skip, and Close do not change page state

1/4

How should the 'Other / Describe in your own words' option behave when chosen?

Single — verbose progress

Static preview: selection is live locally, but Submit, Back, and Skip do not change page state

Question 4 of 8

What drew you to Fluid Functionalism?

Single — live answer readout

Select, then Next / Enter commits; type 'Other', or skip

3/5

Which surface should we build next?

answer: —

Multi-select

Toggle several (checkboxes); Next commits

2/5

Which surfaces should we prioritise? (pick any)

answer: —

Multi-step wizard

Back / Skip / Next across 3 steps

Question 1 of 3

What's your primary role?

Included components

This page is the canonical destination for these components. All ship in the single Kansho pack.

Question options card

components/agent/question-options-card.tsx

Component documentation

Question options card

components/agent/question-options-card.tsx

Purpose

Collects a single or multiple structured answer, optional free text, and multi-step wizard progress.

Appropriate use

Use for bounded clarification questions where the operator can review explicit choices before continuing.

Example

components/agent/question-options-card.tsx has a representative live example in the "Single — live answer readout" section on /components/question-options.

States

Supports single or multiple selection, Other text, skip/back/close, fraction or verbose progress, wizard completion, and an empty option set.

API and props

Exports QuestionOptionsCard and QuestionWizard; props cover question/options, selection mode, Other labels, progress, navigation callbacks, wizard steps, and completion.

Dependencies

Direct imports are React, Lucide icons, Button, and cn.

Accessibility

Uses radiogroup/radio or group/checkbox semantics, roving keyboard focus, labelled Other input, named controls, and a completion status region.

Limitations

Answers are held only in component state until callbacks run; the host owns validation, persistence, async submission, and error feedback.

Source

Source: components/agent/question-options-card.tsx.

Full pack

components/agent/question-options-card.tsx is documented at /components/question-options and installs only through the single Kansho full pack; no individual component install is offered.