Questionnaire

A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions.

<script lang="ts">
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireInput,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSkip,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [
    {
      choices: [
        { description: 'Show what the agent ran and what came back.', label: 'Tool call timeline', value: 'tool-calls' },
        { description: 'Ask before sensitive or destructive actions.', label: 'Approval checkpoints', value: 'approvals' },
        { description: 'Make delegated work and results easier to follow.', label: 'Sub-agent handoffs', value: 'handoffs' },
      ],
      description: 'Choose a direction or describe another task.',
      input: { label: 'Another agent feature', placeholder: 'Describe another feature…' },
      name: 'direction',
      required: true,
      title: 'What should the agent build next?',
    },
    {
      choices: [
        { label: 'Progress', value: 'progress' },
        { label: 'Decisions', value: 'decisions' },
        { label: 'Risks', value: 'risks' },
        { label: 'Next step', value: 'next-step' },
      ],
      description: 'Select all that apply, or skip this question.',
      multiple: true,
      name: 'signals',
      required: false,
      title: 'What should every progress update include?',
    },
    {
      choices: [
        { label: 'Start now', value: 'now' },
        { label: 'Next development cycle', value: 'next-cycle' },
        { label: 'Add it to the backlog', value: 'backlog' },
      ],
      description: 'Choose when the agent should begin the work.',
      name: 'timing',
      required: true,
      title: 'When should work begin?',
    },
  ] as const;

  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    result = `Direction: ${formData.get('direction') ?? 'None'} · Progress signals: ${formData.getAll('signals').join(', ') || 'None'} · Timing: ${formData.get('timing') ?? 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-md" defaultItem="direction" {items} shortcuts="letters" onsubmit={handleSubmit}>
  <QuestionnaireProgress />
  {#each items as question (question.name)}
    <QuestionnaireItem name={question.name} multiple={'multiple' in question && question.multiple} required={question.required}>
      <QuestionnaireTitle>{question.title}</QuestionnaireTitle>
      <QuestionnaireDescription>{question.description}</QuestionnaireDescription>
      <QuestionnaireChoices>
        {#each question.choices as choice (choice.value)}
          <QuestionnaireChoice value={choice.value}>
            <span class="font-medium">{choice.label}</span>
            {#if 'description' in choice}
              <span class="text-muted-foreground">{choice.description}</span>
            {/if}
          </QuestionnaireChoice>
        {/each}
        {#if 'input' in question}
          <QuestionnaireInput aria-label={question.input.label} placeholder={question.input.placeholder} />
        {/if}
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>
  {/each}
  <QuestionnaireActions>
    <QuestionnairePrevious />
    <QuestionnaireSkip />
    <QuestionnaireNext>Next</QuestionnaireNext>
    <QuestionnaireSubmit>Save plan</QuestionnaireSubmit>
  </QuestionnaireActions>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

About

Questionnaire is built on @sveltery/questionnaire, a Svelte package that takes its design from @shadcn/react/questionnaire. It presents one question at a time and manages answers, progress, validation and navigation on top of native form controls.

Installation

Install the dependencies

pnpm add cn class-variance-authority @sveltery/questionnaire

Copy the component

Copy the following files into src/lib/components/ui/questionnaire.

It imports the button component, so copy its folder too.

src/lib/components/ui/questionnaire/Questionnaire.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import type { QuestionnaireProps } from './types.js';
  let { item = $bindable(), class: classProp, ...props }: QuestionnaireProps = $props();
</script>
<Primitive.Root data-slot="questionnaire" bind:item class={cn('gap-4 flex w-full min-w-0 flex-col', classProp)} {...props} />

src/lib/components/ui/questionnaire/QuestionnaireActions.svelte

<script lang="ts">
  import { cn } from 'cn';
  import type { QuestionnaireActionsProps } from './types.js';
  let { children, class: classProp, ...props }: QuestionnaireActionsProps = $props();
</script>
<div data-slot="questionnaire-actions" {...props} class={cn('gap-2 sm:min-h-8 grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center', classProp)}>
  {@render children?.()}
</div>

src/lib/components/ui/questionnaire/QuestionnaireChoice.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import CheckIcon from '@lucide/svelte/icons/check';
  import type { QuestionnaireChoiceProps } from './types.js';
  let { checked = $bindable(), children, class: classProp, ...props }: QuestionnaireChoiceProps = $props();
</script>
<Primitive.Choice
  data-slot="questionnaire-choice"
  bind:checked
  class={cn(
    'border-input dark:bg-input/20 hover:bg-muted/50 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted data-invalid:border-destructive has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-ring/50 gap-2.5 rounded-lg border bg-transparent px-3 py-2.5 text-sm has-[>input:focus-visible]:ring-3 group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start text-start transition-colors outline-none select-none',
    'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
    classProp,
  )}
  {...props}
>
  <Primitive.ChoiceInput
    data-slot="questionnaire-choice-input"
    class="absolute inset-0 z-10 size-full cursor-pointer opacity-0"
  />
  <span
    aria-hidden="true"
    data-slot="questionnaire-choice-indicator"
    class="border-input dark:bg-input/30 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 rounded-[4px] pointer-events-none relative flex shrink-0 items-center justify-center border group-data-[type=radio]/questionnaire-choice:rounded-full"
  >
    <span
      data-slot="questionnaire-choice-indicator-dot"
      class="bg-primary-foreground size-2 hidden rounded-full group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
    ></span>
    <CheckIcon
      data-slot="questionnaire-choice-indicator-check"
      class="size-3.5 hidden group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
    />
  </span>
  <Primitive.ChoiceLabel
    data-slot="questionnaire-choice-label"
    class="gap-0.5 flex min-w-0 flex-1 flex-col leading-snug"
  >
    {@render children?.()}
  </Primitive.ChoiceLabel>
  <Primitive.ChoiceShortcut
    data-slot="questionnaire-choice-shortcut"
    class="border-input bg-background text-muted-foreground size-5 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-md border font-mono text-[0.625rem] font-medium leading-none pointer-events-none ms-auto hidden shrink-0 group-data-[shortcut]/questionnaire-choice:inline-flex"
  />
</Primitive.Choice>

src/lib/components/ui/questionnaire/QuestionnaireChoiceDescription.svelte

<script lang="ts">
  import { cn } from 'cn';
  import type { QuestionnaireChoiceDescriptionProps } from './types.js';
  let { children, class: classProp, ...props }: QuestionnaireChoiceDescriptionProps = $props();
</script>
<span data-slot="questionnaire-choice-description" {...props} class={cn('text-muted-foreground', classProp)}>
  {@render children?.()}
</span>

src/lib/components/ui/questionnaire/QuestionnaireChoices.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import type { QuestionnaireChoicesProps } from './types.js';
  let { class: classProp, ...props }: QuestionnaireChoicesProps = $props();
</script>
<Primitive.Choices data-slot="questionnaire-choices" class={cn('gap-2 group/questionnaire-choices grid min-w-0', classProp)} {...props} />

src/lib/components/ui/questionnaire/QuestionnaireDescription.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import type { QuestionnaireDescriptionProps } from './types.js';
  let { class: classProp, ...props }: QuestionnaireDescriptionProps = $props();
</script>
<Primitive.Description data-slot="questionnaire-description" class={cn('text-sm text-pretty text-muted-foreground', classProp)} {...props} />

src/lib/components/ui/questionnaire/QuestionnaireError.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import type { QuestionnaireErrorProps } from './types.js';
  let { class: classProp, ...props }: QuestionnaireErrorProps = $props();
</script>
<Primitive.Error data-slot="questionnaire-error" class={cn('mt-2 text-sm text-destructive', classProp)} {...props} />

src/lib/components/ui/questionnaire/QuestionnaireInput.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import type { QuestionnaireInputProps } from './types.js';
  let { value = $bindable(), class: classProp, ...props }: QuestionnaireInputProps = $props();
</script>
<div data-slot="questionnaire-input-wrapper" class="w-full group/questionnaire-input relative min-w-0">
  <Primitive.Input
    data-slot="questionnaire-input"
    bind:value
    class={cn(
      'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base focus-visible:ring-3 aria-invalid:ring-3 md:text-sm min-h-11 w-full min-w-0 transition-[color,box-shadow,background-color] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-0',
      'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground',
      classProp,
    )}
    {...props}
  />
</div>

src/lib/components/ui/questionnaire/QuestionnaireItem.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import type { QuestionnaireItemProps } from './types.js';
  let { class: classProp, ...props }: QuestionnaireItemProps = $props();
</script>
<Primitive.Item data-slot="questionnaire-item" class={cn('flex flex-col gap-4 min-w-0 border-0 p-0 outline-none', classProp)} {...props} />

src/lib/components/ui/questionnaire/QuestionnaireNext.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import { buttonVariants } from '../button/index.js';
  import type { QuestionnaireNextProps } from './types.js';
  let { class: classProp, size = 'default', variant = 'default', ...props }: QuestionnaireNextProps = $props();
</script>
<Primitive.Next
  data-slot="questionnaire-next"
  data-size={size}
  data-variant={variant}
  class={cn(buttonVariants({ size, variant }), 'col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0', classProp)}
  {...props}
/>

src/lib/components/ui/questionnaire/QuestionnairePrevious.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import { buttonVariants } from '../button/index.js';
  import type { QuestionnairePreviousProps } from './types.js';
  let { class: classProp, size = 'default', variant = 'outline', ...props }: QuestionnairePreviousProps = $props();
</script>
<Primitive.Previous
  data-slot="questionnaire-previous"
  data-size={size}
  data-variant={variant}
  class={cn(buttonVariants({ size, variant }), 'col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0', classProp)}
  {...props}
/>

src/lib/components/ui/questionnaire/QuestionnaireProgress.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import type { QuestionnaireProgressProps } from './types.js';
  let { class: classProp, ...props }: QuestionnaireProgressProps = $props();
</script>
<Primitive.Progress data-slot="questionnaire-progress" class={cn('text-xs min-h-[1lh] w-fit min-w-[14ch] font-medium text-muted-foreground tabular-nums', classProp)} {...props} />

src/lib/components/ui/questionnaire/QuestionnaireSkip.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import { buttonVariants } from '../button/index.js';
  import type { QuestionnaireSkipProps } from './types.js';
  let { class: classProp, size = 'default', variant = 'outline', ...props }: QuestionnaireSkipProps = $props();
</script>
<Primitive.Skip
  data-slot="questionnaire-skip"
  data-size={size}
  data-variant={variant}
  class={cn(buttonVariants({ size, variant }), 'col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0', classProp)}
  {...props}
/>

src/lib/components/ui/questionnaire/QuestionnaireSubmit.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import { buttonVariants } from '../button/index.js';
  import type { QuestionnaireSubmitProps } from './types.js';
  let { class: classProp, size = 'default', variant = 'default', ...props }: QuestionnaireSubmitProps = $props();
</script>
<Primitive.Submit
  data-slot="questionnaire-submit"
  data-size={size}
  data-variant={variant}
  class={cn(buttonVariants({ size, variant }), 'col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0', classProp)}
  {...props}
/>

src/lib/components/ui/questionnaire/QuestionnaireTitle.svelte

<script lang="ts">
  import * as Primitive from '@sveltery/questionnaire';
  import { cn } from 'cn';
  import type { QuestionnaireTitleProps } from './types.js';
  let { class: classProp, ...props }: QuestionnaireTitleProps = $props();
</script>
<Primitive.Title data-slot="questionnaire-title" class={cn('text-base leading-snug font-medium [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4 text-pretty', classProp)} {...props} />

src/lib/components/ui/questionnaire/types.ts

import type { ComponentProps } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import type * as Primitive from '@sveltery/questionnaire';
import type { ButtonVariants } from '../button/index.js';

type NavigationProps = Pick<ButtonVariants, 'size' | 'variant'>;

export type QuestionnaireProps = ComponentProps<typeof Primitive.Root>;
export type QuestionnaireProgressProps = ComponentProps<typeof Primitive.Progress>;
export type QuestionnaireItemProps = ComponentProps<typeof Primitive.Item>;
export type QuestionnaireTitleProps = ComponentProps<typeof Primitive.Title>;
export type QuestionnaireDescriptionProps = ComponentProps<typeof Primitive.Description>;
export type QuestionnaireChoicesProps = ComponentProps<typeof Primitive.Choices>;
export type QuestionnaireChoiceProps = ComponentProps<typeof Primitive.Choice>;
export type QuestionnaireChoiceDescriptionProps = HTMLAttributes<HTMLSpanElement>;
export type QuestionnaireInputProps = ComponentProps<typeof Primitive.Input>;
export type QuestionnaireErrorProps = ComponentProps<typeof Primitive.Error>;
export type QuestionnaireActionsProps = HTMLAttributes<HTMLDivElement>;
export type QuestionnairePreviousProps = ComponentProps<typeof Primitive.Previous> & NavigationProps;
export type QuestionnaireSkipProps = ComponentProps<typeof Primitive.Skip> & NavigationProps;
export type QuestionnaireNextProps = ComponentProps<typeof Primitive.Next> & NavigationProps;
export type QuestionnaireSubmitProps = ComponentProps<typeof Primitive.Submit> & NavigationProps;
export type {
  QuestionnaireChoiceDefinition,
  QuestionnaireInputType,
  QuestionnaireItemDefinition,
  QuestionnaireItemStatus,
  QuestionnaireShortcutMode,
} from '@sveltery/questionnaire';

src/lib/components/ui/questionnaire/index.ts

export { default as Questionnaire } from './Questionnaire.svelte';
export { default as QuestionnaireProgress } from './QuestionnaireProgress.svelte';
export { default as QuestionnaireItem } from './QuestionnaireItem.svelte';
export { default as QuestionnaireTitle } from './QuestionnaireTitle.svelte';
export { default as QuestionnaireDescription } from './QuestionnaireDescription.svelte';
export { default as QuestionnaireChoices } from './QuestionnaireChoices.svelte';
export { default as QuestionnaireChoice } from './QuestionnaireChoice.svelte';
export { default as QuestionnaireChoiceDescription } from './QuestionnaireChoiceDescription.svelte';
export { default as QuestionnaireInput } from './QuestionnaireInput.svelte';
export { default as QuestionnaireError } from './QuestionnaireError.svelte';
export { default as QuestionnaireActions } from './QuestionnaireActions.svelte';
export { default as QuestionnairePrevious } from './QuestionnairePrevious.svelte';
export { default as QuestionnaireSkip } from './QuestionnaireSkip.svelte';
export { default as QuestionnaireNext } from './QuestionnaireNext.svelte';
export { default as QuestionnaireSubmit } from './QuestionnaireSubmit.svelte';
export type {
  QuestionnaireProps,
  QuestionnaireProgressProps,
  QuestionnaireItemProps,
  QuestionnaireTitleProps,
  QuestionnaireDescriptionProps,
  QuestionnaireChoicesProps,
  QuestionnaireChoiceProps,
  QuestionnaireChoiceDescriptionProps,
  QuestionnaireInputProps,
  QuestionnaireErrorProps,
  QuestionnaireActionsProps,
  QuestionnairePreviousProps,
  QuestionnaireSkipProps,
  QuestionnaireNextProps,
  QuestionnaireSubmitProps,
  QuestionnaireChoiceDefinition,
  QuestionnaireInputType,
  QuestionnaireItemDefinition,
  QuestionnaireItemStatus,
  QuestionnaireShortcutMode,
} from './types.js';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireInput,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSkip,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$lib/components/ui/questionnaire';
</script>

<script lang="ts">
  const items = [
    {
      name: 'direction',
      required: true,
      prompt: 'What should we prototype next?',
      description: 'Choose a direction or write your own.',
      choices: [
        { value: 'delegation', label: 'Delegation', description: 'Show how work moves to a specialist.' },
        { value: 'questions', label: 'Question prompts', description: 'Show choices while the interface waits.' },
        { value: 'both', label: 'Both together' },
      ],
      input: { label: 'Another answer', placeholder: 'Type another answer…' },
    },
    {
      name: 'detail',
      required: false,
      prompt: 'How much detail should it include?',
      description: 'Skip this if you are not sure yet.',
      choices: [
        { value: 'focused', label: 'Focused' },
        { value: 'complete', label: 'Complete flow' },
      ],
    },
  ] as const;
</script>

Define the collection once: pass it to Questionnaire for server-rendered progress, actions, and shortcuts, then loop over it to render the parts.

<Questionnaire {items} onsubmit={handleSubmit}>
  <QuestionnaireProgress />
  {#each items as question (question.name)}
    <QuestionnaireItem name={question.name} required={question.required}>
      <QuestionnaireTitle>{question.prompt}</QuestionnaireTitle>
      <QuestionnaireDescription>{question.description}</QuestionnaireDescription>
      <QuestionnaireChoices>
        {#each question.choices as choice (choice.value)}
          <QuestionnaireChoice value={choice.value}>
            <span class="font-medium">{choice.label}</span>
            {#if 'description' in choice}
              <span class="text-muted-foreground">{choice.description}</span>
            {/if}
          </QuestionnaireChoice>
        {/each}
        {#if 'input' in question}
          <QuestionnaireInput aria-label={question.input.label} placeholder={question.input.placeholder} />
        {/if}
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>
  {/each}
  <QuestionnaireActions>
    <QuestionnairePrevious />
    <QuestionnaireSkip />
    <QuestionnaireNext />
    <QuestionnaireSubmit />
  </QuestionnaireActions>
</Questionnaire>

<script lang="ts">
  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const answers = new FormData(event.currentTarget);
    // answers.get('direction'), answers.getAll(...) for multiple items.
  }
</script>

Composition

Use the following composition to build a Questionnaire:

Questionnaire
├── QuestionnaireProgress
├── QuestionnaireItem
│   ├── QuestionnaireTitle
│   ├── QuestionnaireDescription
│   ├── QuestionnaireChoices
│   │   ├── QuestionnaireChoice
│   │   └── QuestionnaireInput
│   └── QuestionnaireError
└── QuestionnaireActions
    ├── QuestionnairePrevious
    ├── QuestionnaireSkip
    ├── QuestionnaireNext
    └── QuestionnaireSubmit

Questionnaire owns the ordered items, active item, answer state, validation, progress, and navigation. The containing page, card, dialog, or drawer owns close and cancellation behavior, persistence, transport, and branching.

Server Rendering

Pass items to server-render the active item, progress, actions, and answer shortcuts. The API reference below describes the complete behavior.

Multiple Selection

Use multiple for an item that accepts more than one fixed answer. Read the answers with FormData.getAll().

<script lang="ts">
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [{ choices: [{ value: 'source' }, { value: 'tests' }, { value: 'docs' }, { value: 'history' }], name: 'context', required: true }];

  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    result = `Context: ${new FormData(event.currentTarget).getAll('context').join(', ') || 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-md" {items} shortcuts="letters" onsubmit={handleSubmit}>
  <QuestionnaireItem name="context" multiple required>
    <QuestionnaireTitle>What context should the agent inspect?</QuestionnaireTitle>
    <QuestionnaireDescription>Select every source that may affect the implementation.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="source">Relevant source files</QuestionnaireChoice>
      <QuestionnaireChoice value="tests">Existing tests</QuestionnaireChoice>
      <QuestionnaireChoice value="docs">Architecture documentation</QuestionnaireChoice>
      <QuestionnaireChoice value="history">Recent commit history</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireActions>
    <QuestionnaireSubmit>Share context</QuestionnaireSubmit>
  </QuestionnaireActions>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

Freeform Answer

Compose QuestionnaireInput with fixed choices when the user can provide another answer.

<script lang="ts">
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireInput,
    QuestionnaireItem,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [{ choices: [{ value: 'incremental' }, { value: 'module' }, { value: 'rewrite' }], name: 'approach', required: true }];

  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    result = `Approach: ${new FormData(event.currentTarget).get('approach') ?? 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-md" {items} shortcuts="letters" onsubmit={handleSubmit}>
  <QuestionnaireItem name="approach" required>
    <QuestionnaireTitle>How should the agent approach this refactor?</QuestionnaireTitle>
    <QuestionnaireDescription>Choose a strategy or write a more specific instruction.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="incremental">Make the smallest safe change</QuestionnaireChoice>
      <QuestionnaireChoice value="module">Refactor one module at a time</QuestionnaireChoice>
      <QuestionnaireChoice value="rewrite">Replace the implementation completely</QuestionnaireChoice>
      <QuestionnaireInput aria-label="Another refactoring approach" placeholder="Describe another approach…" />
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireActions>
    <QuestionnaireSubmit>Use this approach</QuestionnaireSubmit>
  </QuestionnaireActions>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

Explicit Skip

Add QuestionnaireSkip when an optional item may be intentionally left unanswered. Use onStatusChange on the item when your application needs to distinguish a skipped answer from a missing one. A skipped item is absent from FormData.

<script lang="ts">
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireInput,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSkip,
    QuestionnaireSubmit,
    QuestionnaireTitle,
    type QuestionnaireItemStatus,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [{ name: 'task', required: true }, { name: 'constraints' }, { name: 'review', required: true }];

  let constraintStatus = $state<QuestionnaireItemStatus>('unanswered');
  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const constraints = constraintStatus === 'skipped' ? 'Skipped' : (formData.get('constraints') ?? 'None');
    result = `Task: ${formData.get('task') ?? 'None'} · Constraints: ${constraints} · Review: ${formData.get('review') ?? 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-md" defaultItem="task" {items} onsubmit={handleSubmit}>
  <QuestionnaireProgress />

  <QuestionnaireItem name="task" required>
    <QuestionnaireTitle>What kind of change is this?</QuestionnaireTitle>
    <QuestionnaireDescription>Choose the category that best describes the work.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="feature">New feature</QuestionnaireChoice>
      <QuestionnaireChoice value="fix">Bug fix</QuestionnaireChoice>
      <QuestionnaireChoice value="refactor">Refactor</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireItem name="constraints" onStatusChange={(status) => (constraintStatus = status)}>
    <QuestionnaireTitle>Are there any implementation constraints?</QuestionnaireTitle>
    <QuestionnaireDescription>Answer if needed, or intentionally skip this question.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="no-dependencies">Do not add dependencies</QuestionnaireChoice>
      <QuestionnaireChoice value="no-migrations">Do not change the database</QuestionnaireChoice>
      <QuestionnaireChoice value="preserve-api">Preserve the public API</QuestionnaireChoice>
      <QuestionnaireInput aria-label="Another implementation constraint" placeholder="Describe another constraint…" />
    </QuestionnaireChoices>
  </QuestionnaireItem>

  <QuestionnaireItem name="review" required>
    <QuestionnaireTitle>How should the work be reviewed?</QuestionnaireTitle>
    <QuestionnaireDescription>Choose the checks the agent should complete before handoff.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="tests">Run the test suite</QuestionnaireChoice>
      <QuestionnaireChoice value="diff">Review the final diff</QuestionnaireChoice>
      <QuestionnaireChoice value="both">Tests and diff review</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireActions>
    <QuestionnairePrevious />
    <QuestionnaireSkip />
    <QuestionnaireNext>Next</QuestionnaireNext>
    <QuestionnaireSubmit>Submit brief</QuestionnaireSubmit>
  </QuestionnaireActions>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

Shortcuts

Assign a letter or number key to each answer with shortcuts. "letters" assigns A through Z and "numbers" assigns 1 through 9. Disabled choices are skipped, and selecting an answer by shortcut does not advance to the next item.

<script lang="ts">
  import { NativeSelect, NativeSelectOption } from '$registry/bases/base/ui/native-select';
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [{ choices: [{ value: 'inspect' }, { value: 'tests' }, { value: 'patch' }], name: 'action', required: true }];

  let style = $state<'none' | 'letters' | 'numbers'>('letters');
  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    result = `Action: ${new FormData(event.currentTarget).get('action') ?? 'None'} · Shortcuts: ${style}`;
  }
</script>

<div class="relative mx-auto flex h-full w-full max-w-md flex-col">
  <NativeSelect aria-label="Shortcut style" class="absolute end-0 top-0" bind:value={style}>
    <NativeSelectOption value="none">No shortcuts</NativeSelectOption>
    <NativeSelectOption value="letters">Letters</NativeSelectOption>
    <NativeSelectOption value="numbers">Numbers</NativeSelectOption>
  </NativeSelect>

  <Questionnaire class="mt-auto" {items} shortcuts={style === 'none' ? undefined : style} onsubmit={handleSubmit}>
    <QuestionnaireItem name="action" required>
      <QuestionnaireTitle>What should the agent do next?</QuestionnaireTitle>
      <QuestionnaireDescription>Use the displayed shortcut or navigate with the keyboard.</QuestionnaireDescription>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="inspect">Inspect the implementation</QuestionnaireChoice>
        <QuestionnaireChoice value="tests">Run the relevant tests</QuestionnaireChoice>
        <QuestionnaireChoice value="patch">Prepare the patch</QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireActions>
      <QuestionnaireSubmit>Confirm action</QuestionnaireSubmit>
    </QuestionnaireActions>
    {#if result}
      <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
    {/if}
  </Questionnaire>
</div>

Disabled Choice

Set disabled on a QuestionnaireChoice to make one answer unavailable. A disabled choice cannot be selected, is skipped by shortcuts and is left out of FormData. Use QuestionnaireChoiceDescription for the muted line under a choice label.

<script lang="ts">
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoiceDescription,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireSkip,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [{ choices: [{ value: 'plus' }, { value: 'pro' }, { disabled: true, value: 'enterprise' }], name: 'plan', required: true }];

  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    result = `Plan: ${new FormData(event.currentTarget).get('plan') ?? 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-lg" defaultItem="plan" {items} onsubmit={handleSubmit}>
  <QuestionnaireItem name="plan" required>
    <QuestionnaireTitle>Choose a plan</QuestionnaireTitle>
    <QuestionnaireDescription>Enterprise is not available on your account.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="plus">
        <span class="font-medium">Plus</span>
        <QuestionnaireChoiceDescription>For individuals and small teams</QuestionnaireChoiceDescription>
      </QuestionnaireChoice>
      <QuestionnaireChoice value="pro">
        <span class="font-medium">Pro</span>
        <QuestionnaireChoiceDescription>For growing businesses</QuestionnaireChoiceDescription>
      </QuestionnaireChoice>
      <QuestionnaireChoice value="enterprise" disabled>
        <span class="font-medium">Enterprise</span>
        <QuestionnaireChoiceDescription>For large teams and enterprises</QuestionnaireChoiceDescription>
      </QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>
  <QuestionnaireActions class="w-full">
    <QuestionnairePrevious />
    <QuestionnaireSkip />
    <QuestionnaireNext>Next</QuestionnaireNext>
    <QuestionnaireSubmit>Save answers</QuestionnaireSubmit>
  </QuestionnaireActions>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

No Description

QuestionnaireDescription is optional. Leave it out when the title is enough and the item still keeps its progress, choices and shortcuts.

<script lang="ts">
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSkip,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [{ choices: [{ value: 'inspect' }, { value: 'implement' }, { value: 'review' }], name: 'task', required: true }];

  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    result = `Task: ${new FormData(event.currentTarget).get('task') ?? 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-lg" defaultItem="task" {items} shortcuts="letters" onsubmit={handleSubmit}>
  <QuestionnaireProgress />
  <QuestionnaireItem name="task" required>
    <QuestionnaireTitle>What should the agent do next?</QuestionnaireTitle>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="inspect">Inspect the codebase</QuestionnaireChoice>
      <QuestionnaireChoice value="implement">Implement the change</QuestionnaireChoice>
      <QuestionnaireChoice value="review">Review the result</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>
  <QuestionnaireActions class="w-full">
    <QuestionnairePrevious />
    <QuestionnaireSkip />
    <QuestionnaireNext>Next</QuestionnaireNext>
    <QuestionnaireSubmit>Save answers</QuestionnaireSubmit>
  </QuestionnaireActions>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

Validation

Questionnaire validates the active item before moving forward and validates all enabled items when the form submits.

A required item is valid after it has an answer.
An optional item is valid after it has an answer or is explicitly skipped.
Disabled items and answers are ignored.

required does not add visible "Required" text. Say it in the QuestionnaireTitle or QuestionnaireDescription. When validation fails, Questionnaire keeps or opens the invalid item and focuses an answer. QuestionnaireError stays hidden until its item is invalid, and its children replace the default message.

<QuestionnaireItem name="scope" required>
  <QuestionnaireTitle>What should the project include? (Required)</QuestionnaireTitle>
  <QuestionnaireChoices>…</QuestionnaireChoices>
  <QuestionnaireError>Please choose a project scope.</QuestionnaireError>
</QuestionnaireItem>

Custom Validation

Combine bind:item with your own check to return to an invalid item and present its error. Set invalid on the item, render the message in QuestionnaireError, and move item to the first invalid item.

<script lang="ts">
  import { Card, CardAction, CardContent, CardFooter, CardHeader } from '$registry/bases/base/ui/card';
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [
    { name: 'detail', required: true },
    { name: 'audience', required: true },
  ];

  type ItemName = 'detail' | 'audience';
  type Errors = Partial<Record<ItemName, string>>;

  // A cross-field rule the questionnaire cannot know: public answers must be complete.
  function validate(answers: { detail: string; audience: string }): Errors {
    if (answers.audience === 'public' && answers.detail === 'summary') {
      return { detail: 'Public answers need enough context. Choose a complete answer.' };
    }
    return {};
  }

  let item = $state('detail');
  let errors = $state<Errors>({});
  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const answers = { detail: String(formData.get('detail')), audience: String(formData.get('audience')) };
    errors = validate(answers);
    const firstInvalid = (['detail', 'audience'] as const).find((name) => errors[name]);
    if (firstInvalid) {
      item = firstInvalid;
      result = '';
    } else {
      result = `Detail: ${answers.detail} · Audience: ${answers.audience}`;
    }
  }
</script>

{#snippet validationProgress()}
  <QuestionnaireProgress class="min-w-0">
    {#snippet render(props, state)}
      <div {...props}>{state.current} / {state.total}</div>
    {/snippet}
  </QuestionnaireProgress>
{/snippet}

<Questionnaire class="mx-auto max-w-md" bind:item {items} onsubmit={handleSubmit}>
  <Card class="w-full">
    <QuestionnaireItem invalid={Boolean(errors.detail)} name="detail" required>
      <CardHeader>
        <QuestionnaireTitle>How much detail should the answer include?</QuestionnaireTitle>
        <QuestionnaireDescription>Choose the response depth.</QuestionnaireDescription>
        <CardAction>{@render validationProgress()}</CardAction>
      </CardHeader>
      <CardContent>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="summary" onchange={() => delete errors.detail}>Concise summary</QuestionnaireChoice>
          <QuestionnaireChoice value="complete" onchange={() => delete errors.detail}>Complete answer</QuestionnaireChoice>
        </QuestionnaireChoices>
        <QuestionnaireError>{errors.detail}</QuestionnaireError>
      </CardContent>
    </QuestionnaireItem>

    <QuestionnaireItem invalid={Boolean(errors.audience)} name="audience" required>
      <CardHeader>
        <QuestionnaireTitle>Who will read the answer?</QuestionnaireTitle>
        <QuestionnaireDescription>Public answers require complete context.</QuestionnaireDescription>
        <CardAction>{@render validationProgress()}</CardAction>
      </CardHeader>
      <CardContent>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="team" onchange={() => delete errors.audience}>My team</QuestionnaireChoice>
          <QuestionnaireChoice value="public" onchange={() => delete errors.audience}>Public audience</QuestionnaireChoice>
        </QuestionnaireChoices>
        <QuestionnaireError>{errors.audience}</QuestionnaireError>
      </CardContent>
    </QuestionnaireItem>

    <CardFooter>
      <QuestionnaireActions>
        <QuestionnairePrevious />
        <QuestionnaireNext>Next</QuestionnaireNext>
        <QuestionnaireSubmit>Validate answers</QuestionnaireSubmit>
      </QuestionnaireActions>
    </CardFooter>
  </Card>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

Controlled

Bind item to control the active item from host state, such as returning to an invalid step. onItemChange runs whenever navigation requests a different item.

Current checkpoint: Change scope

<script lang="ts">
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [
    { name: 'scope', required: true },
    { name: 'checks', required: true },
    { name: 'output', required: true },
  ];

  const itemLabels: Record<string, string> = {
    scope: 'Change scope',
    checks: 'Verification',
    output: 'Final output',
  };

  let item = $state('scope');
  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    result = `Scope: ${formData.get('scope') ?? 'None'} · Verification: ${formData.get('checks') ?? 'None'} · Output: ${formData.get('output') ?? 'None'}`;
  }
</script>

<div class="relative mx-auto flex h-full w-full max-w-md flex-col">
  <p class="absolute end-0 top-0 text-sm text-muted-foreground" role="status">Current checkpoint: {itemLabels[item]}</p>

  <Questionnaire class="mt-auto" bind:item {items} onsubmit={handleSubmit}>
    <QuestionnaireProgress />

    <QuestionnaireItem name="scope" required>
      <QuestionnaireTitle>What may the agent change?</QuestionnaireTitle>
      <QuestionnaireDescription>The host stores the active checkpoint while Questionnaire navigates.</QuestionnaireDescription>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="component">Only the target component</QuestionnaireChoice>
        <QuestionnaireChoice value="tests">Component and related tests</QuestionnaireChoice>
        <QuestionnaireChoice value="feature">The complete feature area</QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireItem name="checks" required>
      <QuestionnaireTitle>Which verification level should it use?</QuestionnaireTitle>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="targeted">Targeted tests</QuestionnaireChoice>
        <QuestionnaireChoice value="package">Package tests and typecheck</QuestionnaireChoice>
        <QuestionnaireChoice value="full">Full workspace verification</QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireItem name="output" required>
      <QuestionnaireTitle>What should the agent return when finished?</QuestionnaireTitle>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="summary">Concise summary</QuestionnaireChoice>
        <QuestionnaireChoice value="diff">Summary with changed files</QuestionnaireChoice>
        <QuestionnaireChoice value="handoff">Detailed implementation handoff</QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireActions>
      <QuestionnairePrevious />
      <QuestionnaireNext>Next</QuestionnaireNext>
      <QuestionnaireSubmit>Save workflow</QuestionnaireSubmit>
    </QuestionnaireActions>
    {#if result}
      <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
    {/if}
  </Questionnaire>
</div>

Resume

Restore a saved active item and default answers with defaultItem, defaultChecked and defaultValue, then reset changes back to that saved state with a type="reset" button.

<script lang="ts">
  import { Button } from '$registry/bases/base/ui/button';
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireInput,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [{ name: 'change', required: true }, { name: 'verification', required: true }, { name: 'notes' }];

  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    result = `Migration: ${formData.get('change') ?? 'None'} · Verification: ${formData.getAll('verification').join(', ') || 'None'} · Notes: ${formData.get('notes') || 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-md" defaultItem="verification" {items} onreset={() => (result = 'Saved answers restored')} onsubmit={handleSubmit}>
  <QuestionnaireProgress />

  <QuestionnaireItem name="change" required>
    <QuestionnaireTitle>What kind of migration is this?</QuestionnaireTitle>
    <QuestionnaireDescription>This answer was saved during the previous session.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="incremental" defaultChecked>Incremental migration</QuestionnaireChoice>
      <QuestionnaireChoice value="cutover">Single cutover</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireItem name="verification" multiple required>
    <QuestionnaireTitle>How should the migration be verified?</QuestionnaireTitle>
    <QuestionnaireDescription>These checks were selected during the previous session.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="tests" defaultChecked>Run migration tests</QuestionnaireChoice>
      <QuestionnaireChoice value="typecheck" defaultChecked>Run the typecheck</QuestionnaireChoice>
      <QuestionnaireChoice value="manual">Perform a manual smoke test</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireItem name="notes">
    <QuestionnaireTitle>Anything else the agent should remember?</QuestionnaireTitle>
    <QuestionnaireDescription>This note was saved with the draft.</QuestionnaireDescription>
    <QuestionnaireInput aria-label="Saved migration note" defaultValue="Keep the existing public API stable." />
  </QuestionnaireItem>

  <QuestionnaireActions>
    <Button type="reset" variant="outline">Reset changes</Button>
    <QuestionnairePrevious />
    <QuestionnaireNext>Next</QuestionnaireNext>
    <QuestionnaireSubmit>Update draft</QuestionnaireSubmit>
  </QuestionnaireActions>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

Conditional Items

Disable items that do not apply to the user's earlier answers. Disabled items are excluded from progress, navigation, validation, and submission.

<script lang="ts">
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  let runtime = $state('local');
  const items = $derived([{ name: 'runtime', required: true }, { disabled: runtime !== 'cloud', name: 'environment', required: true }, { name: 'approval', required: true }]);

  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    result = `Runtime: ${formData.get('runtime') ?? 'None'} · Environment: ${formData.get('environment') ?? 'Not applicable'} · Approval: ${formData.get('approval') ?? 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-md" defaultItem="runtime" {items} onsubmit={handleSubmit}>
  <QuestionnaireProgress />

  <QuestionnaireItem name="runtime" required>
    <QuestionnaireTitle>Where should the agent run?</QuestionnaireTitle>
    <QuestionnaireDescription>Cloud runs add an environment question to this flow.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice checked={runtime === 'local'} value="local" onchange={() => (runtime = 'local')}>Local workspace</QuestionnaireChoice>
      <QuestionnaireChoice checked={runtime === 'cloud'} value="cloud" onchange={() => (runtime = 'cloud')}>Cloud workspace</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireItem disabled={runtime !== 'cloud'} name="environment" required>
    <QuestionnaireTitle>Which cloud environment should it use?</QuestionnaireTitle>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="preview">Preview</QuestionnaireChoice>
      <QuestionnaireChoice value="staging">Staging</QuestionnaireChoice>
      <QuestionnaireChoice value="isolated">Isolated sandbox</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireItem name="approval" required>
    <QuestionnaireTitle>When should the agent request approval?</QuestionnaireTitle>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="writes">Before writing files</QuestionnaireChoice>
      <QuestionnaireChoice value="commands">Before running commands</QuestionnaireChoice>
      <QuestionnaireChoice value="sensitive">Only for sensitive actions</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireActions>
    <QuestionnairePrevious />
    <QuestionnaireNext>Next</QuestionnaireNext>
    <QuestionnaireSubmit>Save execution plan</QuestionnaireSubmit>
  </QuestionnaireActions>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

Navigation actions stay enabled by default so activating Next or Submit can show a validation error. Read item status to opt into disabled navigation and custom action styling. data-status carries the active item's status, so you can restyle an action without reading it in script.

<script lang="ts">
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSubmit,
    QuestionnaireTitle,
    type QuestionnaireItemStatus,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [
    { name: 'permission', required: true },
    { name: 'verification', required: true },
  ];

  type ItemName = 'permission' | 'verification';

  let item = $state('permission');
  let statuses = $state<Record<ItemName, QuestionnaireItemStatus>>({ permission: 'unanswered', verification: 'unanswered' });
  const unanswered = $derived(statuses[item as ItemName] === 'unanswered');
  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    result = `Permission: ${formData.get('permission') ?? 'None'} · Verification: ${formData.get('verification') ?? 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-md" bind:item {items} onsubmit={handleSubmit}>
  <QuestionnaireProgress />

  <QuestionnaireItem name="permission" required onStatusChange={(status) => (statuses.permission = status)}>
    <QuestionnaireTitle>What may the agent modify?</QuestionnaireTitle>
    <QuestionnaireDescription>Next is intentionally disabled until an answer is selected.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="files">Project files</QuestionnaireChoice>
      <QuestionnaireChoice value="tests">Project files and tests</QuestionnaireChoice>
      <QuestionnaireChoice value="config">Files, tests, and configuration</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireItem name="verification" required onStatusChange={(status) => (statuses.verification = status)}>
    <QuestionnaireTitle>What must pass before completion?</QuestionnaireTitle>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="tests">Tests</QuestionnaireChoice>
      <QuestionnaireChoice value="types">Tests and types</QuestionnaireChoice>
      <QuestionnaireChoice value="all">Tests, types, and visual QA</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireActions>
    <QuestionnairePrevious />
    <QuestionnaireNext class="data-[status=unanswered]:opacity-50" disabled={unanswered} variant="secondary">Next</QuestionnaireNext>
    <QuestionnaireSubmit disabled={unanswered}>Save permissions</QuestionnaireSubmit>
  </QuestionnaireActions>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

<QuestionnaireNext class="data-[status=unanswered]:opacity-50" disabled={unanswered}>Next</QuestionnaireNext>

Custom Progress

QuestionnaireProgress renders Question {current} of {total} by default. Use the render snippet to change its element or format, and pass a localized aria-label when needed.

<script lang="ts">
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [{ name: 'scope', required: true }, { name: 'strategy', required: true }, { name: 'tests', required: true }, { name: 'delivery', required: true }];

  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    result = `Scope: ${formData.get('scope') ?? 'None'} · Commits: ${formData.get('strategy') ?? 'None'} · Tests: ${formData.get('tests') ?? 'None'} · Delivery: ${formData.get('delivery') ?? 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-md" defaultItem="scope" {items} onsubmit={handleSubmit}>
  <QuestionnaireProgress class="w-full">
    {#snippet render(props, state)}
      <div {...props}>
        <div class="mb-2 flex gap-1.5" aria-hidden="true">
          {#each { length: state.total }, index (index)}
            <span class={['h-1.5 flex-1 rounded-full', index < state.current ? 'bg-primary' : 'bg-muted']}></span>
          {/each}
        </div>
        <span>Checkpoint {state.current} of {state.total}</span>
      </div>
    {/snippet}
  </QuestionnaireProgress>

  <QuestionnaireItem name="scope" required>
    <QuestionnaireTitle>How large is the change?</QuestionnaireTitle>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="small">Small patch</QuestionnaireChoice>
      <QuestionnaireChoice value="medium">Feature-sized change</QuestionnaireChoice>
      <QuestionnaireChoice value="large">Cross-package change</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireItem name="strategy" required>
    <QuestionnaireTitle>How should commits be organized?</QuestionnaireTitle>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="single">Single commit</QuestionnaireChoice>
      <QuestionnaireChoice value="logical">Logical commits</QuestionnaireChoice>
      <QuestionnaireChoice value="squash">Squash before review</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireItem name="tests" required>
    <QuestionnaireTitle>Which tests should run?</QuestionnaireTitle>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="targeted">Targeted tests</QuestionnaireChoice>
      <QuestionnaireChoice value="package">Package suite</QuestionnaireChoice>
      <QuestionnaireChoice value="workspace">Full workspace</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireItem name="delivery" required>
    <QuestionnaireTitle>How should the work be delivered?</QuestionnaireTitle>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="patch">Patch only</QuestionnaireChoice>
      <QuestionnaireChoice value="commit">Committed locally</QuestionnaireChoice>
      <QuestionnaireChoice value="branch">Push a review branch</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireActions>
    <QuestionnairePrevious />
    <QuestionnaireNext>Next</QuestionnaireNext>
    <QuestionnaireSubmit>Finish plan</QuestionnaireSubmit>
  </QuestionnaireActions>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

<QuestionnaireProgress aria-label="Setup progress">
  {#snippet render(props, state)}
    <output {...props}>Checkpoint {state.current} of {state.total}</output>
  {/snippet}
</QuestionnaireProgress>

Animated Items

Animate the active item while keeping progress and navigation stationary. Inactive items hide immediately and stay mounted, so a transition: directive never runs. Animate the entry from onItemChange instead, here with a Tween that skips the motion when the user prefers reduced motion.

<script lang="ts">
  import { cubicOut } from 'svelte/easing';
  import { prefersReducedMotion, Tween } from 'svelte/motion';
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [
    { name: 'task', required: true },
    { name: 'review', required: true },
    { name: 'delivery', required: true },
  ];

  // Items stay mounted and only toggle `hidden`, so a transition directive never fires. A tween plays the entry instead.
  const entry = new Tween(1, { duration: 300, easing: cubicOut });

  function animate() {
    if (prefersReducedMotion.current) return;
    entry.set(0, { duration: 0 });
    entry.set(1);
  }

  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    result = `Task: ${formData.get('task') ?? 'None'} · Review: ${formData.get('review') ?? 'None'} · Delivery: ${formData.get('delivery') ?? 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-md" defaultItem="task" {items} onItemChange={animate} onsubmit={handleSubmit}>
  <QuestionnaireProgress />

  <div style:opacity={entry.current} style:transform="translateY({(1 - entry.current) * 0.5}rem)">
    <QuestionnaireItem name="task" required>
      <QuestionnaireTitle>What should the agent do?</QuestionnaireTitle>
      <QuestionnaireDescription>Choose the task for this run.</QuestionnaireDescription>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="implement">Implement the requested change</QuestionnaireChoice>
        <QuestionnaireChoice value="debug">Debug the current behavior</QuestionnaireChoice>
        <QuestionnaireChoice value="review">Review the implementation</QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireItem name="review" required>
      <QuestionnaireTitle>How should the work be reviewed?</QuestionnaireTitle>
      <QuestionnaireDescription>Select the verification depth.</QuestionnaireDescription>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="targeted">Targeted checks</QuestionnaireChoice>
        <QuestionnaireChoice value="complete">Complete test suite</QuestionnaireChoice>
        <QuestionnaireChoice value="manual">Tests and manual QA</QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireItem name="delivery" required>
      <QuestionnaireTitle>How should the result be delivered?</QuestionnaireTitle>
      <QuestionnaireDescription>Choose the final handoff format.</QuestionnaireDescription>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="summary">Concise summary</QuestionnaireChoice>
        <QuestionnaireChoice value="diff">Summary and changed files</QuestionnaireChoice>
        <QuestionnaireChoice value="handoff">Detailed review handoff</QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>
  </div>

  <QuestionnaireActions>
    <QuestionnairePrevious />
    <QuestionnaireNext>Next</QuestionnaireNext>
    <QuestionnaireSubmit>Save workflow</QuestionnaireSubmit>
  </QuestionnaireActions>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

Card

Compose Questionnaire with Card slots while keeping the question title and description semantic. Render QuestionnaireTitle and QuestionnaireDescription through CardTitle and CardDescription, give the title an id, and connect it with the item's aria-labelledby since it replaces the default legend.

<script lang="ts">
  import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$registry/bases/base/ui/card';
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [
    { choices: [{ value: 'fix' }, { value: 'refactor' }, { value: 'docs' }], name: 'task', required: true },
    { choices: [{ value: 'summary' }, { value: 'files' }, { value: 'review' }], name: 'output', required: true },
  ];

  const uid = $props.id();
  const taskTitleId = `${uid}-task`;
  const outputTitleId = `${uid}-output`;

  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    result = `Task: ${formData.get('task') ?? 'None'} · Handoff: ${formData.get('output') ?? 'None'}`;
  }
</script>

<Questionnaire class="mx-auto max-w-md" defaultItem="task" {items} shortcuts="numbers" onsubmit={handleSubmit}>
  <Card>
    <QuestionnaireItem aria-labelledby={taskTitleId} name="task" required>
      <CardHeader>
        <QuestionnaireTitle id={taskTitleId}>
          {#snippet render(props, _state, children)}
            <CardTitle {...props}>{@render children?.()}</CardTitle>
          {/snippet}
          What should the agent work on?
        </QuestionnaireTitle>
        <QuestionnaireDescription>
          {#snippet render(props, _state, children)}
            <CardDescription {...props}>{@render children?.()}</CardDescription>
          {/snippet}
          Choose the task that should be handled next.
        </QuestionnaireDescription>
        <CardAction>
          <QuestionnaireProgress />
        </CardAction>
      </CardHeader>
      <CardContent>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="fix">Fix the failing tests</QuestionnaireChoice>
          <QuestionnaireChoice value="refactor">Refactor the data layer</QuestionnaireChoice>
          <QuestionnaireChoice value="docs">Update the integration guide</QuestionnaireChoice>
        </QuestionnaireChoices>
        <QuestionnaireError />
      </CardContent>
    </QuestionnaireItem>

    <QuestionnaireItem aria-labelledby={outputTitleId} name="output" required>
      <CardHeader>
        <QuestionnaireTitle id={outputTitleId}>
          {#snippet render(props, _state, children)}
            <CardTitle {...props}>{@render children?.()}</CardTitle>
          {/snippet}
          What should the final handoff include?
        </QuestionnaireTitle>
        <QuestionnaireDescription>
          {#snippet render(props, _state, children)}
            <CardDescription {...props}>{@render children?.()}</CardDescription>
          {/snippet}
          Pick the level of detail needed for review.
        </QuestionnaireDescription>
        <CardAction>
          <QuestionnaireProgress />
        </CardAction>
      </CardHeader>
      <CardContent>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="summary">Summary only</QuestionnaireChoice>
          <QuestionnaireChoice value="files">Summary and changed files</QuestionnaireChoice>
          <QuestionnaireChoice value="review">Full review handoff</QuestionnaireChoice>
        </QuestionnaireChoices>
        <QuestionnaireError />
      </CardContent>
    </QuestionnaireItem>

    <CardFooter>
      <QuestionnaireActions class="w-full">
        <QuestionnairePrevious />
        <QuestionnaireNext>Next</QuestionnaireNext>
        <QuestionnaireSubmit>Create task</QuestionnaireSubmit>
      </QuestionnaireActions>
    </CardFooter>
  </Card>
  {#if result}
    <p role="status" class="mt-4 text-sm text-muted-foreground">{result}</p>
  {/if}
</Questionnaire>

<QuestionnaireItem aria-labelledby={titleId} name="task" required>
  <CardHeader>
    <QuestionnaireTitle id={titleId}>
      {#snippet render(props, _state, children)}
        <CardTitle {...props}>{@render children?.()}</CardTitle>
      {/snippet}
      What should the agent work on?
    </QuestionnaireTitle>
    …
  </CardHeader>
</QuestionnaireItem>

Dialog

Compose Questionnaire inside a Dialog while keeping cancellation and dismissal host-owned. Closing the dialog cancels the flow, while QuestionnaireSkip records an intentional unanswered item.

<script lang="ts">
  import { Button } from '$registry/bases/base/ui/button';
  import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '$registry/bases/base/ui/dialog';
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const items = [
    { name: 'scope', required: true },
    { name: 'tests', required: true },
  ];

  let open = $state(false);
  let result = $state('');

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    open = false;
    result = `Scope: ${formData.get('scope') ?? 'None'} · Verification: ${formData.get('tests') ?? 'None'}`;
  }
</script>

<div class="flex flex-col items-center gap-4">
  <Dialog bind:open>
    <DialogTrigger>
      {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
      Open clarification
    </DialogTrigger>
    <DialogContent>
      <Questionnaire defaultItem="scope" {items} onsubmit={handleSubmit}>
        <QuestionnaireItem name="scope" required>
          <DialogHeader>
            <QuestionnaireProgress />
            <QuestionnaireTitle>
              {#snippet render(props, _state, children)}
                <DialogTitle {...props}>{@render children?.()}</DialogTitle>
              {/snippet}
              Which files are in scope?
            </QuestionnaireTitle>
            <QuestionnaireDescription>
              {#snippet render(props, _state, children)}
                <DialogDescription {...props}>{@render children?.()}</DialogDescription>
              {/snippet}
              Choose how broadly the agent can update the workspace.
            </QuestionnaireDescription>
          </DialogHeader>
          <QuestionnaireChoices>
            <QuestionnaireChoice value="component">Component only</QuestionnaireChoice>
            <QuestionnaireChoice value="feature">Complete feature directory</QuestionnaireChoice>
            <QuestionnaireChoice value="workspace">Any related workspace file</QuestionnaireChoice>
          </QuestionnaireChoices>
          <QuestionnaireError />
        </QuestionnaireItem>

        <QuestionnaireItem name="tests" required>
          <DialogHeader>
            <QuestionnaireProgress />
            <QuestionnaireTitle>
              {#snippet render(props, _state, children)}
                <DialogTitle {...props}>{@render children?.()}</DialogTitle>
              {/snippet}
              How much verification is needed?
            </QuestionnaireTitle>
            <QuestionnaireDescription>
              {#snippet render(props, _state, children)}
                <DialogDescription {...props}>{@render children?.()}</DialogDescription>
              {/snippet}
              Choose the checks the agent should run before handoff.
            </QuestionnaireDescription>
          </DialogHeader>
          <QuestionnaireChoices>
            <QuestionnaireChoice value="targeted">Targeted tests</QuestionnaireChoice>
            <QuestionnaireChoice value="package">Package tests</QuestionnaireChoice>
            <QuestionnaireChoice value="full">Full workspace verification</QuestionnaireChoice>
          </QuestionnaireChoices>
          <QuestionnaireError />
        </QuestionnaireItem>

        <DialogFooter>
          <DialogClose type="button">
            {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
            Cancel
          </DialogClose>
          <QuestionnaireActions>
            <QuestionnairePrevious />
            <QuestionnaireNext>Next</QuestionnaireNext>
            <QuestionnaireSubmit>Send answer</QuestionnaireSubmit>
          </QuestionnaireActions>
        </DialogFooter>
      </Questionnaire>
    </DialogContent>
  </Dialog>
  {#if result}
    <p role="status" class="text-sm text-muted-foreground">{result}</p>
  {/if}
</div>

Custom render targets

Use the render snippet to replace a part's default element. It receives the element props, the render state and the part's children.

<QuestionnaireNext>
  {#snippet render(props, state, children)}
    <MyButton {...props}>{@render children?.()}</MyButton>
  {/snippet}
  Next
</QuestionnaireNext>

Questionnaire and QuestionnaireItem always render a form and a fieldset. If QuestionnaireTitle no longer renders a legend, give it an id and pass that ID to the item with aria-labelledby.

Native forms

Questionnaire always renders a native form and supports onsubmit, onreset, action, and the other form props. Do not nest a Questionnaire inside another form. Answers serialize through native controls: FormData.get(itemName) reads a single answer and FormData.getAll(itemName) reads multiple answers.

novalidate is true by default so validation uses QuestionnaireError instead of the browser's constraint validation UI. form.reset() restores the initial item, default answers, skip state, and validation state.

Keyboard

Questionnaire builds on native radio, checkbox, input, and button behavior.

Key	Behavior
`Tab`	Moves focus between answer controls and visible actions.
`Shift` + `Tab`	Moves focus to the previous control or action.
`ArrowUp`	Moves to the previous answer from the item, a fixed answer, or an empty text-like freeform input. Native radios also select it.
`ArrowDown`	Moves to the next answer from the item, a fixed answer, or an empty text-like freeform input. Native radios also select it.
`ArrowLeft`	Moves to the previous item when focus is outside a radio or text entry control.
`ArrowRight`	Moves to the next item when the active item is answered or skipped and focus is outside a radio or text entry control.
`Space`	Selects a radio, toggles a checkbox, or activates a focused action.
`Enter`	Continues from a selected choice or selected, filled input; activates a focused action.
`Command/Ctrl` + `Enter`	Validates and continues from anywhere inside the questionnaire, or submits the final item.

Shortcuts and arrow navigation pause while you type in a text field. Calling preventDefault() in the root onkeydown handler turns off questionnaire key handling.

Navigation actions stay enabled by default so an attempted action can reveal validation feedback. See Navigation State to disable or restyle an unanswered action.

Accessibility

QuestionnaireItem renders a fieldset, and QuestionnaireTitle renders its legend. Descriptions and active errors are associated with the current item, and invalid items and answer controls expose aria-invalid.

QuestionnaireTitle renders the fieldset legend by default. If it uses a custom render target, connect its id to the item with aria-labelledby.
QuestionnaireDescription and the active QuestionnaireError are connected with aria-describedby.
Fixed choices use native radios and checkboxes.
Progress is exposed as a named progressbar with current, minimum, maximum, and text values.
Navigation uses real buttons. Assigned shortcut keys and available navigation are exposed with aria-keyshortcuts.
Inactive items and actions are hidden and inert.
Successful navigation focuses the newly active item; failed validation focuses an available answer control.
Disabled items are omitted from progress and navigation.

Always give QuestionnaireInput an accessible name with a visible label, aria-label, or aria-labelledby. A placeholder is not a label. Use an explicit id with a visible label:

<Label for="other-answer">Other answer</Label>
<QuestionnaireInput id="other-answer" placeholder="Type another answer…" />

When the design has no visible label, use aria-label:

<QuestionnaireInput aria-label="Other answer" placeholder="Type another answer…" />

Examples

<script lang="ts">
  import { toast } from '$registry/bases/base/ui/toast';
  import { Example, ExampleWrapper } from '$registry/bases/base/components/example';
  import { Button } from '$registry/bases/base/ui/button';
  import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$registry/bases/base/ui/card';
  import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '$registry/bases/base/ui/dialog';
  import {
    Questionnaire,
    QuestionnaireActions,
    QuestionnaireChoice,
    QuestionnaireChoiceDescription,
    QuestionnaireChoices,
    QuestionnaireDescription,
    QuestionnaireError,
    QuestionnaireInput,
    QuestionnaireItem,
    QuestionnaireNext,
    QuestionnairePrevious,
    QuestionnaireProgress,
    QuestionnaireSkip,
    QuestionnaireSubmit,
    QuestionnaireTitle,
  } from '$registry/bases/base/ui/questionnaire';

  const questionnaireItems = [
    { choices: [{ value: 'delegation' }, { value: 'questions' }, { value: 'both' }], name: 'direction', required: true },
    { choices: [{ value: 'progress' }, { value: 'decisions' }, { value: 'risks' }], name: 'signals' },
    { choices: [{ value: 'week' }, { value: 'cycle' }, { value: 'later' }], name: 'timing', required: true },
  ] as const;

  const taskItems = [{ choices: [{ value: 'inspect' }, { value: 'implement' }, { value: 'review' }], name: 'task', required: true }] as const;

  const planItems = [{ choices: [{ value: 'plus' }, { value: 'pro' }, { disabled: true, value: 'enterprise' }], name: 'plan', required: true }] as const;

  const uid = $props.id();
  const directionTitleId = `${uid}-direction`;
  const signalsTitleId = `${uid}-signals`;
  const timingTitleId = `${uid}-timing`;

  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    const values = {
      direction: formData.get('direction'),
      signals: formData.getAll('signals'),
      timing: formData.get('timing'),
    };

    toast.add({
      title: 'Questionnaire submitted',
      description: `Direction: ${values.direction ?? 'None'} · Progress signals: ${values.signals.join(', ') || 'None'} · Timing: ${values.timing ?? 'None'}`,
    });
  }
</script>

{#snippet QuestionnaireNavigation()}
  <QuestionnaireActions class="w-full">
    <QuestionnairePrevious />
    <QuestionnaireSkip />
    <QuestionnaireNext>Next</QuestionnaireNext>
    <QuestionnaireSubmit>Save answers</QuestionnaireSubmit>
  </QuestionnaireActions>
{/snippet}

{#snippet QuestionnaireQuestions()}
  <QuestionnaireItem name="direction" required>
    <QuestionnaireTitle>What should we prototype next?</QuestionnaireTitle>
    <QuestionnaireDescription>Choose one direction or write another answer.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="delegation">
        <span class="font-medium">Sub-agent delegation</span>
        <QuestionnaireChoiceDescription>Show when work is delegated and what comes back.</QuestionnaireChoiceDescription>
      </QuestionnaireChoice>
      <QuestionnaireChoice value="questions">
        <span class="font-medium">Question prompts</span>
        <QuestionnaireChoiceDescription>Show choices while the agent waits for input.</QuestionnaireChoiceDescription>
      </QuestionnaireChoice>
      <QuestionnaireChoice value="both">
        <span class="font-medium">Both together</span>
        <QuestionnaireChoiceDescription>Explore one unified interaction pattern.</QuestionnaireChoiceDescription>
      </QuestionnaireChoice>
      <QuestionnaireInput aria-label="Another direction" placeholder="Type another direction…" />
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>
  <QuestionnaireItem name="signals" multiple>
    <QuestionnaireTitle>What should every progress update include?</QuestionnaireTitle>
    <QuestionnaireDescription>Select all that apply, or skip this question.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="progress">Progress</QuestionnaireChoice>
      <QuestionnaireChoice value="decisions">Decisions</QuestionnaireChoice>
      <QuestionnaireChoice value="risks">Risks</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>
  <QuestionnaireItem name="timing" required>
    <QuestionnaireTitle>When should this be revisited?</QuestionnaireTitle>
    <QuestionnaireDescription>Choose when this should be revisited.</QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice value="week">This week</QuestionnaireChoice>
      <QuestionnaireChoice value="cycle">Next cycle</QuestionnaireChoice>
      <QuestionnaireChoice value="later">Revisit later</QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>
{/snippet}

{#snippet QuestionnaireCardQuestions()}
  <QuestionnaireItem aria-labelledby={directionTitleId} name="direction" required>
    <Card class="mx-auto w-full max-w-lg">
      <CardHeader>
        <QuestionnaireTitle id={directionTitleId}>
          {#snippet render(props, _state, children)}
            <CardTitle {...props}>{@render children?.()}</CardTitle>
          {/snippet}
          What should we prototype next?
        </QuestionnaireTitle>
        <QuestionnaireDescription>
          {#snippet render(props, _state, children)}
            <CardDescription {...props}>{@render children?.()}</CardDescription>
          {/snippet}
          Choose one direction or write another answer.
        </QuestionnaireDescription>
        <CardAction>
          <QuestionnaireProgress />
        </CardAction>
      </CardHeader>
      <CardContent>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="delegation">
            <span class="font-medium">Sub-agent delegation</span>
            <QuestionnaireChoiceDescription>Show when work is delegated and what comes back.</QuestionnaireChoiceDescription>
          </QuestionnaireChoice>
          <QuestionnaireChoice value="questions">
            <span class="font-medium">Question prompts</span>
            <QuestionnaireChoiceDescription>Show choices while the agent waits for input.</QuestionnaireChoiceDescription>
          </QuestionnaireChoice>
          <QuestionnaireChoice value="both">
            <span class="font-medium">Both together</span>
            <QuestionnaireChoiceDescription>Explore one unified interaction pattern.</QuestionnaireChoiceDescription>
          </QuestionnaireChoice>
          <QuestionnaireInput aria-label="Another direction" placeholder="Type another direction…" />
        </QuestionnaireChoices>
        <QuestionnaireError />
      </CardContent>
      <CardFooter>
        {@render QuestionnaireNavigation()}
      </CardFooter>
    </Card>
  </QuestionnaireItem>
  <QuestionnaireItem aria-labelledby={signalsTitleId} name="signals" multiple>
    <Card class="mx-auto w-full max-w-lg">
      <CardHeader>
        <QuestionnaireTitle id={signalsTitleId}>
          {#snippet render(props, _state, children)}
            <CardTitle {...props}>{@render children?.()}</CardTitle>
          {/snippet}
          What should every progress update include?
        </QuestionnaireTitle>
        <QuestionnaireDescription>
          {#snippet render(props, _state, children)}
            <CardDescription {...props}>{@render children?.()}</CardDescription>
          {/snippet}
          Select all that apply, or skip this question.
        </QuestionnaireDescription>
        <CardAction>
          <QuestionnaireProgress />
        </CardAction>
      </CardHeader>
      <CardContent>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="progress">Progress</QuestionnaireChoice>
          <QuestionnaireChoice value="decisions">Decisions</QuestionnaireChoice>
          <QuestionnaireChoice value="risks">Risks</QuestionnaireChoice>
        </QuestionnaireChoices>
        <QuestionnaireError />
      </CardContent>
      <CardFooter>
        {@render QuestionnaireNavigation()}
      </CardFooter>
    </Card>
  </QuestionnaireItem>
  <QuestionnaireItem aria-labelledby={timingTitleId} name="timing" required>
    <Card class="mx-auto w-full max-w-lg">
      <CardHeader>
        <QuestionnaireTitle id={timingTitleId}>
          {#snippet render(props, _state, children)}
            <CardTitle {...props}>{@render children?.()}</CardTitle>
          {/snippet}
          When should this be revisited?
        </QuestionnaireTitle>
        <QuestionnaireDescription>
          {#snippet render(props, _state, children)}
            <CardDescription {...props}>{@render children?.()}</CardDescription>
          {/snippet}
          Choose when this should be revisited.
        </QuestionnaireDescription>
        <CardAction>
          <QuestionnaireProgress />
        </CardAction>
      </CardHeader>
      <CardContent>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="week">This week</QuestionnaireChoice>
          <QuestionnaireChoice value="cycle">Next cycle</QuestionnaireChoice>
          <QuestionnaireChoice value="later">Revisit later</QuestionnaireChoice>
        </QuestionnaireChoices>
        <QuestionnaireError />
      </CardContent>
      <CardFooter>
        {@render QuestionnaireNavigation()}
      </CardFooter>
    </Card>
  </QuestionnaireItem>
{/snippet}

{#snippet QuestionnaireStandalone()}
  <Example title="Standalone" containerClass="md:col-span-2">
    <Questionnaire class="mx-auto max-w-lg" defaultItem="direction" items={questionnaireItems} shortcuts="letters" onsubmit={handleSubmit}>
      <QuestionnaireProgress />
      {@render QuestionnaireQuestions()}
      {@render QuestionnaireNavigation()}
    </Questionnaire>
  </Example>
{/snippet}

{#snippet QuestionnaireCard()}
  <Example title="Card" containerClass="md:col-span-2">
    <Questionnaire defaultItem="direction" items={questionnaireItems} shortcuts="numbers" onsubmit={handleSubmit}>
      {@render QuestionnaireCardQuestions()}
    </Questionnaire>
  </Example>
{/snippet}

{#snippet QuestionnaireDialog()}
  <Example title="Dialog" class="items-center justify-center" containerClass="md:col-span-2">
    <Dialog>
      <DialogTrigger>
        {#snippet render(props, _state, content)}<Button variant="outline" {...props}>{@render content?.()}</Button>{/snippet}
        Open questionnaire
      </DialogTrigger>
      <DialogContent>
        <Questionnaire defaultItem="direction" items={questionnaireItems} onsubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle class="sr-only">Plan an agent interface</DialogTitle>
            <DialogDescription class="sr-only">Answer three questions to shape the next prototype.</DialogDescription>
            <QuestionnaireProgress class="font-semibold tracking-widest text-foreground uppercase">
              {#snippet render(props, state)}
                <span {...props}>Question {state.current} of {state.total}</span>
              {/snippet}
            </QuestionnaireProgress>
          </DialogHeader>
          {@render QuestionnaireQuestions()}
          <DialogFooter>
            {@render QuestionnaireNavigation()}
          </DialogFooter>
        </Questionnaire>
      </DialogContent>
    </Dialog>
  </Example>
{/snippet}

{#snippet QuestionnaireNoDescription()}
  <Example title="No description" containerClass="md:col-span-2">
    <Questionnaire class="mx-auto max-w-lg" defaultItem="task" items={taskItems} shortcuts="letters" onsubmit={handleSubmit}>
      <QuestionnaireProgress />
      <QuestionnaireItem name="task" required>
        <QuestionnaireTitle>What should the agent do next?</QuestionnaireTitle>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="inspect">Inspect the codebase</QuestionnaireChoice>
          <QuestionnaireChoice value="implement">Implement the change</QuestionnaireChoice>
          <QuestionnaireChoice value="review">Review the result</QuestionnaireChoice>
        </QuestionnaireChoices>
        <QuestionnaireError />
      </QuestionnaireItem>
      {@render QuestionnaireNavigation()}
    </Questionnaire>
  </Example>
{/snippet}

{#snippet QuestionnaireDisabled()}
  <Example title="Disabled" containerClass="md:col-span-2">
    <Questionnaire class="mx-auto max-w-lg" defaultItem="plan" items={planItems} onsubmit={handleSubmit}>
      <QuestionnaireItem name="plan" required>
        <QuestionnaireTitle>Choose a plan</QuestionnaireTitle>
        <QuestionnaireDescription>Enterprise is not available on your account.</QuestionnaireDescription>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="plus">
            <span class="font-medium">Plus</span>
            <QuestionnaireChoiceDescription>For individuals and small teams</QuestionnaireChoiceDescription>
          </QuestionnaireChoice>
          <QuestionnaireChoice value="pro">
            <span class="font-medium">Pro</span>
            <QuestionnaireChoiceDescription>For growing businesses</QuestionnaireChoiceDescription>
          </QuestionnaireChoice>
          <QuestionnaireChoice value="enterprise" disabled>
            <span class="font-medium">Enterprise</span>
            <QuestionnaireChoiceDescription>For large teams and enterprises</QuestionnaireChoiceDescription>
          </QuestionnaireChoice>
        </QuestionnaireChoices>
        <QuestionnaireError />
      </QuestionnaireItem>
      {@render QuestionnaireNavigation()}
    </Questionnaire>
  </Example>
{/snippet}

<ExampleWrapper>
  {@render QuestionnaireStandalone()}
  {@render QuestionnaireCard()}
  {@render QuestionnaireDialog()}
  {@render QuestionnaireNoDescription()}
  {@render QuestionnaireDisabled()}
</ExampleWrapper>

API Reference

Every part accepts the native attributes of its element and a class. Navigation parts also accept the Button size and variant props. QuestionnaireActions is a styled-only layout div, and QuestionnaireChoiceDescription is a styled span for text under a choice label.

The styled QuestionnaireChoice composes the native input, the visual indicator, the label and the shortcut hint for you. Every part also takes a render snippet. It receives (props, state), or (props, state, children) for a part with children, and the render states are listed per part below.

Data attributes

Use these attributes for styling. Boolean attributes are present when true and absent when false.

Questionnaire and QuestionnaireProgress

Data attribute	Value
`data-current`	One-based active item position.
`data-total`	Number of enabled items.
`data-first`	Present on the first item.
`data-last`	Present on the last item.
`data-shortcuts`	`"letters"` \| `"numbers"` on `Questionnaire` when enabled.

QuestionnaireItem

Data attribute	Value
`data-active`	Present when active.
`data-status`	`"unanswered"` \| `"answered"` \| `"skipped"`
`data-required`	Present when required.
`data-multiple`	Present when multiple.
`data-disabled`	Present when disabled.
`data-invalid`	Present after failed validation.

QuestionnaireChoice

Data attribute	Value
`data-type`	`"radio"` \| `"checkbox"`
`data-checked`	Present when selected.
`data-unchecked`	Present when not selected.
`data-disabled`	Present when disabled.
`data-invalid`	Present when its item is invalid.
`data-shortcut`	Assigned letter or number.

QuestionnaireChoices

Data attribute	Value
`data-shortcuts`	`"letters"` \| `"numbers"` when enabled.

QuestionnaireInput

Data attribute	Value
`data-filled`	Present when the input has non-empty text.
`data-empty`	Present when the input has no answer text.
`data-disabled`	Present when disabled.
`data-invalid`	Present when its item is invalid.

QuestionnaireError

Data attribute	Value
`data-invalid`	Present while the error is active.

QuestionnairePrevious, QuestionnaireSkip, QuestionnaireNext and QuestionnaireSubmit

Data attribute	Value
`data-visible`	Present when the action applies to the active item.
`data-hidden`	Present when the action does not apply.
`data-disabled`	Present when disabled.
`data-shortcut`	`"Enter"` on an enabled, visible Next or Submit.
`data-status`	Active item: `"unanswered"`, `"answered"`, or `"skipped"`.

QuestionnaireTitle and QuestionnaireDescription have no state attributes.

Questionnaire

The form and coordination root.

Prop	Type	Default	Description
`item`	`string`		Bindable. The active item name.
`defaultItem`	`string`	first enabled item	Initially active item name.
`items`	`readonly QuestionnaireItemDefinition[]`		Optional item data for server rendering and item order.
`onItemChange`	`(item: string) => void`		Called when navigation requests a different item.
`shortcuts`	`'letters' \\| 'numbers'`		Assigns scoped answer shortcuts in definition or rendered DOM order.
`novalidate`	`boolean`	`true`	Disables native constraint UI, while preserving questionnaire validation.
`onsubmit`	`(event: SubmitEvent) => void`		Native form submission handler after every item validates.
`onreset`	`(event: Event) => void`		Native reset handler. Prevent default to stop questionnaire reset.

Questionnaire exposes current, total, first, last, and shortcuts through data attributes. The optional collection types are exported with the component:

type QuestionnaireChoiceDefinition = {
  value: string;
  disabled?: boolean;
};

type QuestionnaireItemDefinition = {
  name: string;
  required?: boolean;
  disabled?: boolean;
  choices?: readonly QuestionnaireChoiceDefinition[];
};

QuestionnaireProgress

Position within the enabled item collection.

Prop	Type	Default	Description
`children`	`Snippet`	`Question {current} of {total}`	Custom progress content.
`aria-label`	`string`	`Questionnaire progress`	Accessible progressbar name.
`render`	`Snippet<[props, state, children]>`	`<div>`	Custom render target with progress state.

The render state contains current, total, first, and last.

QuestionnaireItem

One questionnaire step. Item names must be unique within a Questionnaire. The name belongs to the answer controls, not the fieldset.

Prop	Type	Default	Description
`name`	`string`	required	Unique item identifier and native form field name.
`invalid`	`boolean`	`false`	Marks the item invalid from an external validator.
`required`	`boolean`	`false`	Requires an answer and prevents Skip.
`multiple`	`boolean`	`false`	Renders fixed choices as checkboxes.
`disabled`	`boolean`	`false`	Omits the item from progress and navigation.
`onStatusChange`	`(status: QuestionnaireItemStatus) => void`		Observes `"unanswered"`, `"answered"`, and `"skipped"` changes.

The render state contains active, disabled, invalid, multiple, required, and status.

QuestionnaireTitle

The item title. Renders a semantic legend by default.

Prop	Type	Default	Description
`render`	`Snippet<[props, state, children]>`	`<legend>`	Custom render target. Pair its `id` with the item's `aria-labelledby`.

QuestionnaireDescription

Supporting text connected to the item with aria-describedby.

Prop	Type	Default	Description
`render`	`Snippet<[props, state, children]>`	`<p>`	Custom render target.

QuestionnaireChoices

A layout container for fixed and freeform answers.

Prop	Type	Default	Description
`render`	`Snippet<[props, state, children]>`	`<div>`	Custom render target.

The render state contains shortcuts.

QuestionnaireChoice

A fixed answer. The default <label> keeps the whole row associated with its native control.

Prop	Type	Default	Description
`value`	`string`	required	Native answer value.
`checked`	`boolean`		Bindable. The checked state.
`defaultChecked`	`boolean`	`false`	Initial checked state.
`disabled`	`boolean`	`false`	Disables the native answer control.
`onchange`	`(event: Event) => void`		Native input change handler.
`render`	`Snippet<[props, state, children]>`	`<label>`	Custom render target with choice state.

The render state contains checked, disabled, invalid, shortcut, and type.

QuestionnaireInput

A freeform answer. Its native name is managed by the containing item.

Prop	Type	Default	Description
`value`	`string`		Bindable. The input value.
`defaultValue`	`string`		Initial input value.
`disabled`	`boolean`	`false`	Disables the input.
`oninput`	`(event: Event) => void`		Native input handler.
`onchange`	`(event: Event) => void`		Native change handler.
`type`	`QuestionnaireInputType`	`'text'`	A text-entry type such as `'email'`, `'number'`, or `'date'`.
`render`	`Snippet<[props, state]>`	`<input>`	Custom render target with input state.

The render state contains disabled, filled, and invalid.

QuestionnaireError

The validation message. It is hidden until its item fails validation.

Prop	Type	Default	Description
`children`	`Snippet`	contextual message	Custom validation message.
`render`	`Snippet<[props, state, children]>`	`<p>`	Custom render target with invalid state.

QuestionnairePrevious, QuestionnaireSkip, QuestionnaireNext, and QuestionnaireSubmit render native buttons and stay mounted while their visibility changes.

Part	Default type	Visible when	Disabled when
`QuestionnairePrevious`	`button`	Not on the first item.	You set `disabled`.
`QuestionnaireSkip`	`button`	Active item is optional.	You set `disabled`.
`QuestionnaireNext`	`button`	Not on the last item.	You set `disabled`.
`QuestionnaireSubmit`	`submit`	On the last item.	You set `disabled`.

Each accepts the native button attributes and:

Prop	Type	Default	Description
`size`	`ButtonProps['size']`	`'default'`	Button size.
`variant`	`ButtonProps['variant']`	`'outline'` for Previous and Skip, `'default'` for Next and Submit	Button variant.
`children`	`Snippet`	The part's name	Button label.
`render`	`Snippet<[props, state, children]>`	`<button>`	Custom render target with navigation state.

The render state contains visible, disabled, shortcut, and the active item's status.