Mischief

18 / Agent UI

Questionnaire

The questions an agent asks before it starts. One at a time, with single or multiple answers, an open answer alongside them, and required ones it will not move past.

Live previewSource

Question 1 of 3

Which files should I rename?

I found 41 matches across the repository.

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/questionnaire
import { Questionnaire } from "mischief-ui/questionnaire"

Usage

const questions = [
  {
    id: "scope",
    prompt: "What should I change?",
    required: true,
    choices: [
      { id: "one", label: "Only this file" },
      { id: "all", label: "Every file that matches" },
    ],
  },
]

export function Clarify() {
  return <Questionnaire questions={questions} onSubmit={start} />
}

API

questionsQuestion[]Prompt, optional description, choices, and flags for multiple, freeform, and required.
answers, defaultAnswers, onAnswersChangeQuestionnaireAnswersChosen choice ids per question, controlled or uncontrolled.
onSubmit(answers: QuestionnaireAnswers) => voidRuns with every answer once the last question is submitted.
freeformbooleanOffers an open answer on every question. Defaults to true, and a question can set its own.
shortcutsbooleanNumber keys pick the choice they label. Defaults to true.
showProgressbooleanShows the position and a progress bar.
previousLabel, nextLabel, skipLabel, submitLabel, requiredMessagestringCopy for the controls and the validation message.

Accessibility

Each question is a fieldset with its prompt as the legend, so the whole question is announced rather than a run of loose options. A single answer uses radios and several uses checkboxes, which brings the right keyboard behaviour without rebuilding it. Position is reported in a polite live region, and a required question that is not answered raises an alert tied to the inputs rather than only colouring them. Number shortcuts are ignored while a freeform answer is being typed.

Dependencies

  • lucide-react