Component

Questionnaire

Questions asked one at a time: white choice cards with the brand's radio or checkbox and a shortcut key, a typed answer, a progress count and Previous, Skip and Next pills.

Text reference

npx -y github:anwarlemu/inkbox-brand-cli#release add questionnaire

Usage

Use when an agent or a setup flow needs a few answers in a row (how to route calls, what to include in a summary). Pass the questions as items to Questionnaire, then render a QuestionnaireItem per question with a QuestionnaireTitle, a QuestionnaireDescription, QuestionnaireChoices of QuestionnaireChoice (add QuestionnaireInput for another answer) and a QuestionnaireError; end with QuestionnaireActions holding Previous, Skip, Next and Submit. Mark required questions; set multiple to allow several answers. onSubmit receives the native form event: read the answers with FormData.

Avoid

More than one question on screen
Animating between questions
A required question without its error message
A purple card fill for a chosen answer

Exports: Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle. This component is a client component.

Dependencies: button, input, kbd, progress, @phosphor-icons/react.

Example

examples/questionnaire.tsx

1"use client";23import * as React from "react";45import {6  Questionnaire,7  QuestionnaireActions,8  QuestionnaireChoice,9  QuestionnaireChoiceDescription,10  QuestionnaireChoices,11  QuestionnaireDescription,12  QuestionnaireError,13  QuestionnaireInput,14  QuestionnaireItem,15  QuestionnaireNext,16  QuestionnairePrevious,17  QuestionnaireProgress,18  QuestionnaireSkip,19  QuestionnaireSubmit,20  QuestionnaireTitle,21} from "@/components/ui/questionnaire";2223const ITEMS = [24  { name: "channel", required: true, choices: [{ value: "email" }, { value: "phone" }, { value: "imessage" }] },25  { name: "include", multiple: true, choices: [{ value: "sender" }, { value: "summary" }, { value: "attachments" }, { value: "next-step" }] },26  { name: "when", required: true, choices: [{ value: "now" }, { value: "hourly" }, { value: "daily" }] },27] as const;2829function Saved({ answers }: { answers: string }) {30  return (31    <p role="status" className="rounded-control bg-success-bg px-3.5 py-2.5 text-body text-fg">32      Saved. {answers}33    </p>34  );35}3637export function Preview() {38  const [saved, setSaved] = React.useState<string>();39  return (40    <div className="mx-auto grid w-full max-w-110 gap-4">41      <Questionnaire42        items={ITEMS}43        onSubmit={(event) => {44          event.preventDefault();45          const data = new FormData(event.currentTarget);46          setSaved(`Channel: ${data.get("channel")}. Include: ${data.getAll("include").join(", ") || "nothing"}. When: ${data.get("when")}.`);47        }}48      >49        <QuestionnaireProgress />50        <QuestionnaireItem name="channel" required>51          <QuestionnaireTitle>Where should @acme tell you about new mail?</QuestionnaireTitle>52          <QuestionnaireDescription>Choose a channel, or type another one.</QuestionnaireDescription>53          <QuestionnaireChoices>54            <QuestionnaireChoice value="email">55              <span className="font-medium">Email</span>56              <QuestionnaireChoiceDescription>A note to robert@acme.com</QuestionnaireChoiceDescription>57            </QuestionnaireChoice>58            <QuestionnaireChoice value="phone">59              <span className="font-medium">Phone</span>60              <QuestionnaireChoiceDescription>A text from the agent&apos;s number</QuestionnaireChoiceDescription>61            </QuestionnaireChoice>62            <QuestionnaireChoice value="imessage">63              <span className="font-medium">iMessage</span>64              <QuestionnaireChoiceDescription>Through the shared iMessage line</QuestionnaireChoiceDescription>65            </QuestionnaireChoice>66            <QuestionnaireInput aria-label="Another channel" placeholder="Another channel" />67          </QuestionnaireChoices>68          <QuestionnaireError />69        </QuestionnaireItem>70        <QuestionnaireItem name="include" multiple>71          <QuestionnaireTitle>What should each note include?</QuestionnaireTitle>72          <QuestionnaireDescription>Choose any, or skip this question.</QuestionnaireDescription>73          <QuestionnaireChoices>74            <QuestionnaireChoice value="sender">The sender</QuestionnaireChoice>75            <QuestionnaireChoice value="summary">A one-line summary</QuestionnaireChoice>76            <QuestionnaireChoice value="attachments">Attachments</QuestionnaireChoice>77            <QuestionnaireChoice value="next-step">The suggested next step</QuestionnaireChoice>78          </QuestionnaireChoices>79          <QuestionnaireError />80        </QuestionnaireItem>81        <QuestionnaireItem name="when" required>82          <QuestionnaireTitle>How often?</QuestionnaireTitle>83          <QuestionnaireDescription>Batched notes arrive once per period.</QuestionnaireDescription>84          <QuestionnaireChoices>85            <QuestionnaireChoice value="now">As each email arrives</QuestionnaireChoice>86            <QuestionnaireChoice value="hourly">Once an hour</QuestionnaireChoice>87            <QuestionnaireChoice value="daily">Once a day</QuestionnaireChoice>88          </QuestionnaireChoices>89          <QuestionnaireError />90        </QuestionnaireItem>91        <QuestionnaireActions>92          <QuestionnairePrevious />93          <QuestionnaireSkip />94          <QuestionnaireNext />95          <QuestionnaireSubmit>Save rule</QuestionnaireSubmit>96        </QuestionnaireActions>97      </Questionnaire>98      {saved && <Saved answers={saved} />}99    </div>100  );101}102103const PLAN = [{ name: "line", required: true, choices: [{ value: "shared" }, { value: "dedicated" }, { value: "port" }] }] as const;104105export function Disabled() {106  return (107    <Questionnaire items={PLAN} shortcuts="letters" className="mx-auto max-w-110" onSubmit={(event) => event.preventDefault()}>108      <QuestionnaireItem name="line" required>109        <QuestionnaireTitle>Which iMessage line should the agent use?</QuestionnaireTitle>110        <QuestionnaireDescription>No dedicated lines are available to assign right now.</QuestionnaireDescription>111        <QuestionnaireChoices>112          <QuestionnaireChoice value="shared">113            <span className="font-medium">Shared</span>114            <QuestionnaireChoiceDescription>Assigned when someone connects</QuestionnaireChoiceDescription>115          </QuestionnaireChoice>116          <QuestionnaireChoice value="dedicated" disabled>117            <span className="font-medium">Dedicated</span>118            <QuestionnaireChoiceDescription>None available</QuestionnaireChoiceDescription>119          </QuestionnaireChoice>120          <QuestionnaireChoice value="port">121            <span className="font-medium">Port a number</span>122            <QuestionnaireChoiceDescription>Bring an existing number</QuestionnaireChoiceDescription>123          </QuestionnaireChoice>124        </QuestionnaireChoices>125        <QuestionnaireError />126      </QuestionnaireItem>127      <QuestionnaireActions>128        <QuestionnaireSubmit>Assign line</QuestionnaireSubmit>129      </QuestionnaireActions>130    </Questionnaire>131  );132}

Source

components/ui/questionnaire.tsx

1"use client";23import * as React from "react";4import { CheckIcon } from "@phosphor-icons/react/ssr";56import { Button } from "@/components/ui/button";7import { Input } from "@/components/ui/input";8import { Kbd } from "@/components/ui/kbd";9import { Progress } from "@/components/ui/progress";10import { cn } from "@/lib/utils";1112// A short set of questions asked one at a time (extrapolated from the console, Figma 427:2715: Create Agent Identity's13// choices and the Where does this agent run? picker). A choice is a 44px white card with the field edge and 8px14// corners, the brand's radio (a thick pink ring when chosen) or checkbox (purple when checked) 14px in, a 14px ink label15// and its number or letter key at the right; a chosen card takes the purple edge. The question is 16px medium ink with16// a 14px secondary line under it; progress is a 12px muted count over a thin purple bar. Changing questions is instant:17// it is driven by the keyboard as often as by the pointer. The answers submit as one native form (FormData), every18// question's inputs included, so the page owns saving and what happens next.1920type Choice = { readonly value: string; readonly disabled?: boolean };21type ItemConfig = { readonly name: string; readonly required?: boolean; readonly multiple?: boolean; readonly choices?: readonly Choice[] };22type Shortcuts = "numbers" | "letters" | "none";2324type QuestionnaireContextValue = {25  order: string[];26  active: string | undefined;27  goTo: (name: string) => void;28  shortcuts: Shortcuts;29  answers: Record<string, string[]>;30  other: Record<string, string>;31  errors: Record<string, string | undefined>;32  configs: React.RefObject<Map<string, ItemConfig>>;33  register: (config: ItemConfig) => () => void;34  setAnswer: (name: string, value: string, checked: boolean) => void;35  setOther: (name: string, text: string) => void;36  next: () => void;37  previous: () => void;38  skip: () => void;39};4041const QuestionnaireContext = React.createContext<QuestionnaireContextValue | null>(null);42const ItemContext = React.createContext<{ name: string; required: boolean; multiple: boolean; id: string } | null>(null);4344function useQuestionnaire() {45  const context = React.useContext(QuestionnaireContext);46  if (!context) throw new Error("Questionnaire parts must be inside a Questionnaire.");47  return context;48}4950function useItem() {51  const context = React.useContext(ItemContext);52  if (!context) throw new Error("This part must be inside a QuestionnaireItem.");53  return context;54}5556const shortcutKey = (index: number, shortcuts: Shortcuts) => (shortcuts === "none" || index > 8 ? undefined : shortcuts === "letters" ? String.fromCharCode(65 + index) : String(index + 1));5758/**59 * The questions and their answers. Pass `items` (name, required, multiple, choices) so the order, progress and shortcuts60 * are known on the server; without it the order is the QuestionnaireItems' order. `defaultItem` or a controlled61 * `item` with `onItemChange` picks the question shown. `shortcuts` puts 1 to 9 (or A to I) on the choices.62 */63function Questionnaire({64  items,65  defaultItem,66  item,67  onItemChange,68  shortcuts = "numbers",69  className,70  onSubmit,71  onKeyDown,72  children,73  ...props74}: Omit<React.ComponentProps<"form">, "onSubmit"> & {75  items?: readonly ItemConfig[];76  defaultItem?: string;77  item?: string;78  onItemChange?: (name: string) => void;79  shortcuts?: Shortcuts;80  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;81}) {82  const form = React.useRef<HTMLFormElement>(null);83  const configs = React.useRef(new Map<string, ItemConfig>(items?.map((i) => [i.name, i])));84  const [registered, setRegistered] = React.useState<string[]>([]);85  const order = items ? items.map((i) => i.name) : registered;86  const [internal, setInternal] = React.useState(defaultItem ?? items?.[0]?.name);87  const active = item ?? internal ?? order[0];88  const [answers, setAnswers] = React.useState<Record<string, string[]>>({});89  const [other, setOtherState] = React.useState<Record<string, string>>({});90  const [errors, setErrors] = React.useState<Record<string, string | undefined>>({});9192  const focusItem = React.useCallback((name: string) => {93    requestAnimationFrame(() => {94      const fieldset = form.current?.querySelector<HTMLElement>(`[data-slot=questionnaire-item][data-name="${CSS.escape(name)}"]`);95      fieldset?.querySelector<HTMLElement>("input:not(:disabled)")?.focus({ preventScroll: true });96    });97  }, []);9899  const goTo = React.useCallback(100    (name: string) => {101      if (item === undefined) setInternal(name);102      onItemChange?.(name);103      focusItem(name);104    },105    [item, onItemChange, focusItem],106  );107108  const register = React.useCallback((config: ItemConfig) => {109    configs.current.set(config.name, { ...configs.current.get(config.name), ...config });110    setRegistered((list) => (list.includes(config.name) ? list : [...list, config.name]));111    return () => setRegistered((list) => list.filter((n) => n !== config.name));112  }, []);113114  const answered = React.useCallback((name: string) => (answers[name]?.length ?? 0) > 0 || (other[name] ?? "").trim() !== "", [answers, other]);115116  const validate = React.useCallback(117    (name: string) => {118      const config = configs.current.get(name);119      const message = config?.required && !answered(name) ? (config.multiple ? "Choose at least one answer to continue." : "Choose an answer to continue.") : undefined;120      setErrors((e) => ({ ...e, [name]: message }));121      return !message;122    },123    [answered],124  );125126  const setAnswer = React.useCallback((name: string, value: string, checked: boolean) => {127    const multiple = configs.current.get(name)?.multiple;128    setAnswers((a) => ({ ...a, [name]: multiple ? (checked ? [...(a[name] ?? []).filter((v) => v !== value), value] : (a[name] ?? []).filter((v) => v !== value)) : checked ? [value] : [] }));129    if (!multiple && checked) setOtherState((o) => ({ ...o, [name]: "" }));130    setErrors((e) => ({ ...e, [name]: undefined }));131  }, []);132133  const setOther = React.useCallback((name: string, text: string) => {134    setOtherState((o) => ({ ...o, [name]: text }));135    if (text && !configs.current.get(name)?.multiple) setAnswers((a) => ({ ...a, [name]: [] }));136    setErrors((e) => ({ ...e, [name]: undefined }));137  }, []);138139  const index = active ? order.indexOf(active) : -1;140  const next = React.useCallback(() => {141    if (!active || !validate(active)) return focusItem(active ?? "");142    const following = order[index + 1];143    if (following) goTo(following);144  }, [active, validate, focusItem, order, index, goTo]);145  const previous = React.useCallback(() => {146    const before = order[index - 1];147    if (before) goTo(before);148  }, [order, index, goTo]);149  const skip = React.useCallback(() => {150    if (!active) return;151    setAnswers((a) => ({ ...a, [active]: [] }));152    setOtherState((o) => ({ ...o, [active]: "" }));153    setErrors((e) => ({ ...e, [active]: undefined }));154    const following = order[index + 1];155    if (following) goTo(following);156  }, [active, order, index, goTo]);157158  const value = React.useMemo<QuestionnaireContextValue>(159    () => ({ order, active, goTo, shortcuts, answers, other, errors, configs, register, setAnswer, setOther, next, previous, skip }),160    [order, active, goTo, shortcuts, answers, other, errors, register, setAnswer, setOther, next, previous, skip],161  );162163  return (164    <QuestionnaireContext.Provider value={value}>165      <form166        ref={form}167        data-slot="questionnaire"168        noValidate169        className={cn("flex w-full min-w-0 flex-col gap-4", className)}170        onSubmit={(event) => {171          // Every required question must be answered; the first one that is not is shown with its message.172          const missing = order.find((name) => !validate(name));173          if (missing) {174            event.preventDefault();175            goTo(missing);176            return;177          }178          onSubmit?.(event);179        }}180        onKeyDown={(event) => {181          onKeyDown?.(event);182          if (event.defaultPrevented || !active || event.metaKey || event.ctrlKey || event.altKey) return;183          const target = event.target as HTMLElement;184          const typing = target instanceof HTMLInputElement && target.type === "text";185          if (event.key === "Enter" && !(target instanceof HTMLButtonElement) && !(target instanceof HTMLTextAreaElement)) {186            event.preventDefault();187            if (index < order.length - 1) next();188            else form.current?.requestSubmit();189            return;190          }191          if (typing || shortcuts === "none") return;192          const key = event.key.toUpperCase();193          const at = shortcuts === "letters" ? key.charCodeAt(0) - 65 : Number(key) - 1;194          if (key.length !== 1 || Number.isNaN(at) || at < 0 || at > 8) return;195          const choice = form.current?.querySelectorAll<HTMLInputElement>(`[data-slot=questionnaire-item][data-name="${CSS.escape(active)}"] [data-slot=questionnaire-choice-input]`)[at];196          if (!choice || choice.disabled) return;197          event.preventDefault();198          choice.focus();199          setAnswer(active, choice.value, choice.type === "checkbox" ? !choice.checked : true);200        }}201        {...props}202      >203        {children}204      </form>205    </QuestionnaireContext.Provider>206  );207}208209/** Where the person is: "Question 2 of 3" in 12px muted medium over a 4px purple bar. */210function QuestionnaireProgress({ className, children, ...props }: React.ComponentProps<"div">) {211  const { order, active } = useQuestionnaire();212  const at = active ? order.indexOf(active) + 1 : 0;213  const total = order.length;214  return (215    <div data-slot="questionnaire-progress" className={cn("grid w-full gap-1.5", className)} {...props}>216      <span className="font-sans text-caption leading-tight font-medium text-fg-muted tabular-nums" aria-live="polite">217        {children ?? (total ? `Question ${at} of ${total}` : " ")}218      </span>219      <Progress value={total ? (at / total) * 100 : 0} aria-label="Progress" className="h-1" />220    </div>221  );222}223224/** One question. Only the current one shows; the others stay in the form so their answers submit with it. */225function QuestionnaireItem({ name, required = false, multiple = false, className, children, ...props }: Omit<React.ComponentProps<"fieldset">, "name"> & { name: string; required?: boolean; multiple?: boolean }) {226  const { active, register, errors } = useQuestionnaire();227  const id = React.useId();228  React.useLayoutEffect(() => register({ name, required, multiple }), [register, name, required, multiple]);229  const context = React.useMemo(() => ({ name, required, multiple, id }), [name, required, multiple, id]);230  const isActive = active === name;231  return (232    <ItemContext.Provider value={context}>233      <fieldset234        data-slot="questionnaire-item"235        data-name={name}236        data-active={isActive || undefined}237        hidden={!isActive}238        aria-labelledby={`${id}-title`}239        aria-describedby={`${id}-description${errors[name] ? ` ${id}-error` : ""}`}240        aria-invalid={errors[name] ? true : undefined}241        className={cn("m-0 flex min-w-0 flex-col gap-4 border-0 p-0 outline-none", className)}242        {...props}243      >244        {children}245      </fieldset>246    </ItemContext.Provider>247  );248}249250function QuestionnaireTitle({ className, ...props }: React.ComponentProps<"div">) {251  const { id } = useItem();252  return <div id={`${id}-title`} data-slot="questionnaire-title" className={cn("font-sans text-body-lg leading-snug font-medium text-pretty text-fg", className)} {...props} />;253}254255function QuestionnaireDescription({ className, ...props }: React.ComponentProps<"p">) {256  const { id } = useItem();257  return <p id={`${id}-description`} data-slot="questionnaire-description" className={cn("-mt-3 font-sans text-body leading-body text-pretty text-fg-secondary", className)} {...props} />;258}259260/** The choices of a question, 8px apart; each direct QuestionnaireChoice gets its shortcut in order. */261function QuestionnaireChoices({ className, children, ...props }: React.ComponentProps<"div">) {262  const { multiple, id } = useItem();263  let index = 0;264  return (265    <div data-slot="questionnaire-choices" role={multiple ? "group" : "radiogroup"} aria-labelledby={`${id}-title`} className={cn("group/questionnaire-choices grid min-w-0 gap-2", className)} {...props}>266      {React.Children.map(children, (child) => (React.isValidElement<{ index?: number }>(child) && child.type === QuestionnaireChoice ? React.cloneElement(child, { index: index++ }) : child))}267    </div>268  );269}270271function QuestionnaireChoice({ value, disabled = false, index = 0, className, children, ...props }: Omit<React.ComponentProps<"label">, "children"> & { value: string; disabled?: boolean; index?: number; children?: React.ReactNode }) {272  const { answers, setAnswer, shortcuts } = useQuestionnaire();273  const { name, multiple } = useItem();274  const checked = answers[name]?.includes(value) ?? false;275  const key = shortcutKey(index, shortcuts);276  return (277    <label278      data-slot="questionnaire-choice"279      data-type={multiple ? "checkbox" : "radio"}280      data-checked={checked || undefined}281      data-disabled={disabled || undefined}282      className={cn(283        "group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-2.5 rounded-control border border-line-field bg-surface px-3.5 py-2.5 text-start font-sans text-body leading-snug text-fg select-none transition-[background-color,border-color] duration-150 ease-out hover:bg-subtle has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-focus-ring data-checked:border-line-brand data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 motion-reduce:transition-none",284        className,285      )}286      {...props}287    >288      <input289        data-slot="questionnaire-choice-input"290        type={multiple ? "checkbox" : "radio"}291        name={name}292        value={value}293        checked={checked}294        disabled={disabled}295        onChange={(event) => setAnswer(name, value, event.target.checked)}296        className="peer sr-only"297      />298      <span299        aria-hidden300        data-slot="questionnaire-choice-indicator"301        className={cn(302          "pointer-events-none mt-px flex size-4.5 shrink-0 items-center justify-center border-[1.5px] border-line-strong bg-surface text-on-primary transition-[background-color,border-color,border-width] duration-150 ease-out motion-reduce:transition-none",303          multiple ? "rounded-xs group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary" : "rounded-pill group-data-checked/questionnaire-choice:border-4 group-data-checked/questionnaire-choice:border-pink",304        )}305      >306        {multiple && <CheckIcon weight="bold" className="hidden size-3.5 group-data-checked/questionnaire-choice:block" />}307      </span>308      <span data-slot="questionnaire-choice-label" className="flex min-w-0 flex-1 flex-col gap-0.5">309        {children}310      </span>311      {key && (312        <Kbd data-slot="questionnaire-choice-shortcut" aria-hidden className="ml-auto hidden shrink-0 sm:inline-flex">313          {key}314        </Kbd>315      )}316    </label>317  );318}319320/** A choice's second line: 14px muted. */321function QuestionnaireChoiceDescription({ className, ...props }: React.ComponentProps<"span">) {322  return <span data-slot="questionnaire-choice-description" className={cn("text-fg-muted", className)} {...props} />;323}324325/** A free answer typed instead of a choice (another answer); typing clears a single choice, choosing clears the text. */326function QuestionnaireInput({ className, ...props }: Omit<React.ComponentProps<typeof Input>, "name" | "value" | "onChange">) {327  const { other, setOther } = useQuestionnaire();328  const { name } = useItem();329  return (330    <div data-slot="questionnaire-input-wrapper" className="group/questionnaire-input relative w-full min-w-0">331      <Input data-slot="questionnaire-input" type="text" name={name} value={other[name] ?? ""} onChange={(event) => setOther(name, event.target.value)} className={cn("h-11", className)} {...props} />332    </div>333  );334}335336/** Why the question cannot be passed yet: 12px red, read out when it appears. */337function QuestionnaireError({ className, children, ...props }: React.ComponentProps<"p">) {338  const { errors } = useQuestionnaire();339  const { name, id } = useItem();340  const message = children ?? errors[name];341  if (!message) return null;342  return (343    <p id={`${id}-error`} role="alert" data-slot="questionnaire-error" className={cn("-mt-2 font-sans text-caption leading-tight text-danger", className)} {...props}>344      {message}345    </p>346  );347}348349/** The buttons under the question: Previous at the left, then Skip and Next (or Submit on the last question). */350function QuestionnaireActions({ className, ...props }: React.ComponentProps<"div">) {351  return <div data-slot="questionnaire-actions" className={cn("grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2", className)} {...props} />;352}353354type ActionProps = Omit<React.ComponentProps<typeof Button>, "onClick" | "type"> & { onClick?: React.MouseEventHandler<HTMLButtonElement> };355356function QuestionnairePrevious({ children, className, variant = "secondary", onClick, ...props }: ActionProps) {357  const { order, active, previous } = useQuestionnaire();358  const first = !active || order.indexOf(active) <= 0;359  return (360    <Button361      data-slot="questionnaire-previous"362      variant={variant}363      disabled={first}364      className={cn("col-start-1 row-start-1 justify-self-start", first && "invisible", className)}365      onClick={(event) => {366        onClick?.(event);367        if (!event.defaultPrevented) previous();368      }}369      {...props}370    >371      {children ?? "Previous"}372    </Button>373  );374}375376function QuestionnaireSkip({ children, className, variant = "ghost", onClick, ...props }: ActionProps) {377  const { active, configs, order, skip } = useQuestionnaire();378  const required = active ? configs.current.get(active)?.required : true;379  const last = !active || order.indexOf(active) === order.length - 1;380  if (required || last) return null;381  return (382    <Button383      data-slot="questionnaire-skip"384      variant={variant}385      className={cn("col-start-2 row-start-1 justify-self-end px-4 text-fg-secondary", className)}386      onClick={(event) => {387        onClick?.(event);388        if (!event.defaultPrevented) skip();389      }}390      {...props}391    >392      {children ?? "Skip"}393    </Button>394  );395}396397function QuestionnaireNext({ children, className, variant = "default", onClick, ...props }: ActionProps) {398  const { order, active, next } = useQuestionnaire();399  if (!active || order.indexOf(active) >= order.length - 1) return null;400  return (401    <Button402      data-slot="questionnaire-next"403      variant={variant}404      className={cn("col-start-3 row-start-1 justify-self-end", className)}405      onClick={(event) => {406        onClick?.(event);407        if (!event.defaultPrevented) next();408      }}409      {...props}410    >411      {children ?? "Next"}412    </Button>413  );414}415416function QuestionnaireSubmit({ children, className, variant = "default", ...props }: Omit<React.ComponentProps<typeof Button>, "type">) {417  const { order, active } = useQuestionnaire();418  if (!active || order.indexOf(active) !== order.length - 1) return null;419  return (420    <Button data-slot="questionnaire-submit" type="submit" variant={variant} className={cn("col-start-3 row-start-1 justify-self-end", className)} {...props}>421      {children ?? "Submit"}422    </Button>423  );424}425426export {427  Questionnaire,428  QuestionnaireActions,429  QuestionnaireChoice,430  QuestionnaireChoiceDescription,431  QuestionnaireChoices,432  QuestionnaireDescription,433  QuestionnaireError,434  QuestionnaireInput,435  QuestionnaireItem,436  QuestionnaireNext,437  QuestionnairePrevious,438  QuestionnaireProgress,439  QuestionnaireSkip,440  QuestionnaireSubmit,441  QuestionnaireTitle,442};

Reference: Extrapolated from the Inkbox console (Figma 427:2715): the radio and checks in Create Agent Identity and the Where does this agent run? picker.