AI chat

Questionnaire

A few questions, one at a time, before Pluto can help.

import { Questionnaire } from "@flinbu/seed";

Before a contrast check

import { Questionnaire } from "@flinbu/seed";

const [sent, setSent] = React.useState<string | null>(null);

<div className="flex w-full max-w-xl flex-col gap-sm rounded-petal rounded-tl-petal-tip border border-secondary bg-primary p-base">
  <Questionnaire onCancel={() => setSent("Not now")} onSubmit={(a) => setSent(JSON.stringify(a))} items={[
    { name: "scope", prompt: "Which themes should I check?", required: true, multiple: true, choices: [
      { value: "light", label: "Light" }, { value: "dark", label: "Dark", description: "3 pairs were flagged last week" }, { value: "hc", label: "High contrast" }] },
    { name: "level", prompt: "Which level?", required: true, choices: [{ value: "aa", label: "AA", description: "4.5:1 for body text" }, { value: "aaa", label: "AAA", description: "7:1 for body text" }] },
    { name: "note", prompt: "Anything I should skip?", input: { label: "What to skip", placeholder: "For example, illustration colors" } },
  ]} />
  {sent ? <p className="m-0 text-tertiary body-body-4-regular">Sent: {sent}</p> : null}
</div>

Use it for

A decision Pluto needs: what to check, which themes, a name.

Use something else for

Long forms: ask three questions or fewer.

Props

Prop	Type	Default	Description
`items`	`{ name, prompt, description?, required?, multiple?, choices?, input? }[]`	–	The questions.
`onSubmit`	`(answers) => void`	–	Answers by name.
`onCancel / cancelLabel`	`() => void / string`	`'Not now'`	First step.
`submitLabel`	`string`	`'Send answers'`	Last step.
`step / onStepChange`	`number`	–	Controlled position.
`shortcuts`	`boolean`	`true`	Number keys.

Accessibility

Each question is a fieldset with its prompt as the legend.
Number keys pick an answer; Enter goes next; a missing required answer shows an error.