Questionnaire

Kuesioner bertahap dengan pertanyaan pilihan tunggal, pilihan ganda, isian bebas, dan pertanyaan yang boleh dilewati.

Question 1 of 3

What should the agent build next?

Choose a direction or describe another task.

Tool call timeline Show what the agent ran and what came back. AApproval checkpoints Ask before sensitive or destructive actions. BSub-agent handoffs Make delegated work and results easier to follow. C

<script setup lang="ts">
import { toast } from 'vue-sonner'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

const items = [
  {
    choices: [
      { value: 'tool-calls' },
      { value: 'approvals' },
      { value: 'handoffs' },
    ],
    name: 'direction',
    required: true,
  },
  {
    choices: [
      { value: 'progress' },
      { value: 'decisions' },
      { value: 'risks' },
      { value: 'next-step' },
    ],
    name: 'signals',
  },
  {
    choices: [{ value: 'now' }, { value: 'next-cycle' }, { value: 'backlog' }],
    name: 'timing',
    required: true,
  },
] as const

function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)
  const signals = formData.getAll('signals')

  toast('Agent plan saved', {
    description: `Direction: ${formData.get('direction') ?? 'None'} · Progress signals: ${signals.join(', ') || 'None'} · Timing: ${formData.get('timing') ?? 'None'}`,
  })
}
</script>

<template>
  <Questionnaire
    class="mx-auto max-w-md"
    default-item="direction"
    :items="items"
    shortcuts="letters"
    @submit="handleSubmit"
  >
    <QuestionnaireProgress />

    <QuestionnaireItem name="direction" required>
      <QuestionnaireTitle>
        What should the agent build next?
      </QuestionnaireTitle>
      <QuestionnaireDescription>
        Choose a direction or describe another task.
      </QuestionnaireDescription>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="tool-calls">
          <span class="font-medium">Tool call timeline</span>
          <span class="text-muted-foreground">
            Show what the agent ran and what came back.
          </span>
        </QuestionnaireChoice>
        <QuestionnaireChoice value="approvals">
          <span class="font-medium">Approval checkpoints</span>
          <span class="text-muted-foreground">
            Ask before sensitive or destructive actions.
          </span>
        </QuestionnaireChoice>
        <QuestionnaireChoice value="handoffs">
          <span class="font-medium">Sub-agent handoffs</span>
          <span class="text-muted-foreground">
            Make delegated work and results easier to follow.
          </span>
        </QuestionnaireChoice>
        <QuestionnaireInput
          aria-label="Another agent feature"
          placeholder="Describe another feature…"
        />
      </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>
        <QuestionnaireChoice value="next-step">
          Next step
        </QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireItem name="timing" required>
      <QuestionnaireTitle>
        When should work begin?
      </QuestionnaireTitle>
      <QuestionnaireDescription>
        Choose when the agent should begin the work.
      </QuestionnaireDescription>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="now">
          Start now
        </QuestionnaireChoice>
        <QuestionnaireChoice value="next-cycle">
          Next development cycle
        </QuestionnaireChoice>
        <QuestionnaireChoice value="backlog">
          Add it to the backlog
        </QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireActions>
      <QuestionnairePrevious />
      <QuestionnaireSkip />
      <QuestionnaireNext>
        Next
      </QuestionnaireNext>
      <QuestionnaireSubmit>
        Save plan
      </QuestionnaireSubmit>
    </QuestionnaireActions>
  </Questionnaire>
</template>

Instalasi

CLI

npx shadcn-vue@latest add questionnaire

Manual

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

Penggunaan

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

const items = [
  { name: 'direction', required: true },
  { name: 'timing', required: true },
]

function handleSubmit(event: Event) {
  event.preventDefault()

  const answers = new FormData(event.target as HTMLFormElement)
  console.log(Object.fromEntries(answers))
}
</script>

<template>
  <Questionnaire :items="items" @submit="handleSubmit">
    <QuestionnaireProgress />

    <QuestionnaireItem name="direction" required>
      <QuestionnaireTitle>What should the agent build next?</QuestionnaireTitle>
      <QuestionnaireDescription>Choose a direction.</QuestionnaireDescription>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="tool-calls">Tool call timeline</QuestionnaireChoice>
        <QuestionnaireChoice value="approvals">Approval checkpoints</QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireItem name="timing" required>
      <QuestionnaireTitle>When should work begin?</QuestionnaireTitle>
      <QuestionnaireChoices>
        <QuestionnaireChoice value="now">Start now</QuestionnaireChoice>
        <QuestionnaireChoice value="backlog">Add it to the backlog</QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireActions>
      <QuestionnairePrevious />
      <QuestionnaireSkip />
      <QuestionnaireNext />
      <QuestionnaireSubmit />
    </QuestionnaireActions>
  </Questionnaire>
</template>

Komposisi

Susunan berikut adalah cara membangun sebuah questionnaire:

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

Questionnaire menghasilkan <form> sungguhan, dan tiap itemnya menghasilkan <fieldset> beserta <legend>. Jawabannya terkirim lewat FormData, jadi Anda tidak perlu state tambahan.

Render di Sisi Server

Isi prop items supaya item aktif, progres, tombol aksi, dan pintasan jawaban ikut dirender di server. Tanpa itu, questionnaire baru mengetahui urutannya setelah semua item ter-mount di klien.

Fitur

• Satu pertanyaan dalam satu waktu, dengan progres, navigasi, dan validasi yang sudah ditangani otomatis.
• Jawaban pilihan tunggal, pilihan ganda, isian bebas, dan pertanyaan yang sengaja dilewati.
• Pintasan keyboard untuk memilih jawaban, plus navigasi antar pertanyaan dan jawaban lewat tombol panah.
• Prop items yang deklaratif untuk mengatur urutan, item bersyarat, dan penetapan pintasan yang konsisten.
• Navigasi yang dikendalikan lewat v-model:item untuk alur validasi buatan sendiri.
• Reset form bawaan browser mengembalikan jawaban ke nilai yang Anda tandai sebagai bawaan.

Contoh

Pilihan Ganda

Pakai multiple untuk pertanyaan yang menerima lebih dari satu jawaban tetap.

What context should the agent inspect?

Select every source that may affect the implementation.

Relevant source files A Existing tests B Architecture documentation C Recent commit history D

<script setup lang="ts">
import { toast } from 'vue-sonner'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

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

function handleSubmit(event: Event) {
  event.preventDefault()

  const context = new FormData(event.target as HTMLFormElement).getAll('context')

  toast('Context selected', {
    description: `Context: ${context.join(', ') || 'None'}`,
  })
}
</script>

<template>
  <Questionnaire
    class="mx-auto max-w-md"
    :items="items"
    shortcuts="letters"
    @submit="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>
  </Questionnaire>
</template>

Jawaban Bebas

Padukan QuestionnaireInput dengan pilihan tetap kalau pengguna boleh mengisi jawaban lain.

How should the agent approach this refactor?

Choose a strategy or write a more specific instruction.

Make the smallest safe change A Refactor one module at a time B Replace the implementation completely C

<script setup lang="ts">
import { toast } from 'vue-sonner'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

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

function handleSubmit(event: Event) {
  event.preventDefault()

  const approach = new FormData(event.target as HTMLFormElement).get('approach')

  toast('Approach selected', {
    description: `Approach: ${approach ?? 'None'}`,
  })
}
</script>

<template>
  <Questionnaire
    class="mx-auto max-w-md"
    :items="items"
    shortcuts="letters"
    @submit="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>
  </Questionnaire>
</template>

Melewati Pertanyaan

Tambahkan QuestionnaireSkip kalau sebuah pertanyaan opsional boleh sengaja dikosongkan.

Question 1 of 3

What kind of change is this?

Choose the category that best describes the work.

New feature Bug fix Refactor

<script setup lang="ts">
import type { QuestionnaireItemStatus } from '@/components/ui/questionnaire'
import { ref } from 'vue'
import { toast } from 'vue-sonner'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

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

const constraintStatus = ref<QuestionnaireItemStatus>('unanswered')

function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)
  const constraints = constraintStatus.value === 'skipped'
    ? 'Skipped'
    : (formData.get('constraints') ?? 'None')

  toast('Agent brief submitted', {
    description: `Task: ${formData.get('task') ?? 'None'} · Constraints: ${constraints} · Review: ${formData.get('review') ?? 'None'}`,
  })
}
</script>

<template>
  <Questionnaire
    class="mx-auto max-w-md"
    default-item="task"
    :items="items"
    @submit="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" @update:status="constraintStatus = $event">
      <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>
  </Questionnaire>
</template>

Pintasan Keyboard

Tetapkan tombol huruf atau angka untuk tiap jawaban lewat shortcuts. Deklarasikan choices pada items supaya tombolnya tetap konsisten berapa pun urutan tampilnya.

No shortcuts Letters Numbers

What should the agent do next?

Use the displayed shortcut or navigate with the keyboard.

Inspect the implementation A Run the relevant tests B Prepare the patch C

<script setup lang="ts">
import type { QuestionnaireShortcutMode } from '@/components/ui/questionnaire'
import { computed, ref } from 'vue'
import { toast } from 'vue-sonner'
import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

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

const mode = ref<'letters' | 'numbers' | 'none'>('letters')

const shortcuts = computed<QuestionnaireShortcutMode | undefined>(() =>
  mode.value === 'none' ? undefined : mode.value)

function handleSubmit(event: Event) {
  event.preventDefault()

  const action = new FormData(event.target as HTMLFormElement).get('action')

  toast('Next action selected', {
    description: `Action: ${action ?? 'None'} · Shortcuts: ${shortcuts.value ?? 'none'}`,
  })
}
</script>

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

    <Questionnaire
      class="mt-auto"
      :items="items"
      :shortcuts="shortcuts"
      @submit="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>
    </Questionnaire>
  </div>
</template>

Validasi Buatan Sendiri

Padukan navigasi terkendali dengan skema eksternal seperti Zod untuk kembali ke pertanyaan yang belum valid dan menampilkan pesan error-nya.

How much detail should the answer include?

Choose the response depth.

1 / 2

Concise summary Complete answer

<script setup lang="ts">
import { ref } from 'vue'
import { toast } from 'vue-sonner'
import { z } from 'zod'
import {
  Card,
  CardAction,
  CardContent,
  CardFooter,
  CardHeader,
} from '@/components/ui/card'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

type ItemName = 'detail' | 'audience'

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

const questionnaireSchema = z
  .object({
    detail: z.enum(['summary', 'complete']),
    audience: z.enum(['team', 'public']),
  })
  .superRefine((answers, context) => {
    if (answers.audience === 'public' && answers.detail === 'summary') {
      context.addIssue({
        code: z.ZodIssueCode.custom,
        message: 'Public answers need enough context. Choose a complete answer.',
        path: ['detail'],
      })
    }
  })

const item = ref<string>('detail')
const errors = ref<Partial<Record<ItemName, string>>>({})

function clearError(name: ItemName) {
  if (errors.value[name]) {
    delete errors.value[name]
  }
}

function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)
  const result = questionnaireSchema.safeParse(Object.fromEntries(formData))

  if (result.success) {
    errors.value = {}
    toast('Agent response configured', {
      description: `Detail: ${result.data.detail} · Audience: ${result.data.audience}`,
    })
    return
  }

  const nextErrors: Partial<Record<ItemName, string>> = {}

  for (const issue of result.error.issues) {
    const name = issue.path[0]

    if ((name === 'detail' || name === 'audience') && !nextErrors[name]) {
      nextErrors[name] = issue.message
    }
  }

  const firstInvalidItem = result.error.issues[0]?.path[0]

  errors.value = nextErrors

  if (firstInvalidItem === 'detail' || firstInvalidItem === 'audience') {
    item.value = firstInvalidItem
  }
}
</script>

<template>
  <Questionnaire
    v-model:item="item"
    class="mx-auto max-w-md"
    :items="items"
    @submit="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>
            <QuestionnaireProgress v-slot="{ current, total }" class="min-w-0">
              {{ current }} / {{ total }}
            </QuestionnaireProgress>
          </CardAction>
        </CardHeader>
        <CardContent>
          <QuestionnaireChoices>
            <QuestionnaireChoice value="summary" @change="clearError('detail')">
              Concise summary
            </QuestionnaireChoice>
            <QuestionnaireChoice value="complete" @change="clearError('detail')">
              Complete answer
            </QuestionnaireChoice>
          </QuestionnaireChoices>
          <QuestionnaireError>
            <template v-if="errors.detail">
              {{ errors.detail }}
            </template>
          </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>
            <QuestionnaireProgress v-slot="{ current, total }" class="min-w-0">
              {{ current }} / {{ total }}
            </QuestionnaireProgress>
          </CardAction>
        </CardHeader>
        <CardContent>
          <QuestionnaireChoices>
            <QuestionnaireChoice value="team" @change="clearError('audience')">
              My team
            </QuestionnaireChoice>
            <QuestionnaireChoice value="public" @change="clearError('audience')">
              Public audience
            </QuestionnaireChoice>
          </QuestionnaireChoices>
          <QuestionnaireError>
            <template v-if="errors.audience">
              {{ errors.audience }}
            </template>
          </QuestionnaireError>
        </CardContent>
      </QuestionnaireItem>

      <CardFooter>
        <QuestionnaireActions>
          <QuestionnairePrevious />
          <QuestionnaireNext>
            Next
          </QuestionnaireNext>
          <QuestionnaireSubmit>
            Validate answers
          </QuestionnaireSubmit>
        </QuestionnaireActions>
      </CardFooter>
    </Card>
  </Questionnaire>
</template>

QuestionnaireError sudah punya pesan bawaan, jadi tampilkan pesan Anda sendiri hanya kalau memang ada:

<QuestionnaireError>
  <template v-if="errors.detail">
    {{ errors.detail }}
  </template>
</QuestionnaireError>

Dikendalikan dari Luar

Kendalikan item aktif dari state induk, misalnya untuk kembali ke langkah yang belum valid. Pakai v-model:item.

Current checkpoint: Change scope

Question 1 of 3

What may the agent change?

The host stores the active checkpoint while Questionnaire navigates.

Only the target component Component and related tests The complete feature area

<script setup lang="ts">
import { computed, ref } from 'vue'
import { toast } from 'vue-sonner'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

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

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

const item = ref('scope')
const label = computed(() => itemLabels[item.value])

function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)

  toast('Agent workflow configured', {
    description: `Scope: ${formData.get('scope') ?? 'None'} · Verification: ${formData.get('checks') ?? 'None'} · Output: ${formData.get('output') ?? 'None'}`,
  })
}
</script>

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

    <Questionnaire
      v-model:item="item"
      class="mt-auto"
      :items="items"
      @submit="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>
    </Questionnaire>
  </div>
</template>

Melanjutkan Sesi

Pulihkan item aktif dan jawaban bawaan yang tersimpan, lalu kembalikan perubahan ke keadaan simpanan itu.

Question 2 of 3

How should the migration be verified?

These checks were selected during the previous session.

Run migration tests Run the typecheck Perform a manual smoke test

<script setup lang="ts">
import { toast } from 'vue-sonner'
import { Button } from '@/components/ui/button'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

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

function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)
  const verification = formData.getAll('verification')

  toast('Draft updated', {
    description: `Migration: ${formData.get('change') ?? 'None'} · Verification: ${verification.join(', ') || 'None'} · Notes: ${formData.get('notes') || 'None'}`,
  })
}
</script>

<template>
  <Questionnaire
    class="mx-auto max-w-md"
    default-item="verification"
    :items="items"
    @reset="toast('Saved answers restored')"
    @submit="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" default-checked>
          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" default-checked>
          Run migration tests
        </QuestionnaireChoice>
        <QuestionnaireChoice value="typecheck" default-checked>
          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"
        default-value="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>
  </Questionnaire>
</template>

Pertanyaan Bersyarat

Nonaktifkan pertanyaan yang tidak relevan dengan jawaban pengguna sebelumnya.

Question 1 of 2

Where should the agent run?

Cloud runs add an environment question to this flow.

Local workspace Cloud workspace

<script setup lang="ts">
import { computed, ref } from 'vue'
import { toast } from 'vue-sonner'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

const runtime = ref('local')

const items = computed(() => [
  { name: 'runtime', required: true },
  { disabled: runtime.value !== 'cloud', name: 'environment', required: true },
  { name: 'approval', required: true },
])

function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)

  toast('Execution plan saved', {
    description: `Runtime: ${formData.get('runtime') ?? 'None'} · Environment: ${formData.get('environment') ?? 'Not applicable'} · Approval: ${formData.get('approval') ?? 'None'}`,
  })
}
</script>

<template>
  <Questionnaire
    class="mx-auto max-w-md"
    default-item="runtime"
    :items="items"
    @submit="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"
          @change="runtime = 'local'"
        >
          Local workspace
        </QuestionnaireChoice>
        <QuestionnaireChoice
          :checked="runtime === 'cloud'"
          value="cloud"
          @change="runtime = 'cloud'"
        >
          Cloud workspace
        </QuestionnaireChoice>
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>

    <QuestionnaireItem
      name="environment"
      :disabled="runtime !== 'cloud'"
      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>
  </Questionnaire>
</template>

State Navigasi

Baca status tiap item untuk menonaktifkan navigasi dan menyesuaikan style tombol aksi. Dengarkan @update:status pada item yang ingin Anda pantau.

Question 1 of 2

What may the agent modify?

Next is intentionally disabled until an answer is selected.

Project files Project files and tests Files, tests, and configuration

<script setup lang="ts">
import type { QuestionnaireItemStatus } from '@/components/ui/questionnaire'
import { computed, ref } from 'vue'
import { toast } from 'vue-sonner'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

type ItemName = 'permission' | 'verification'

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

const item = ref<ItemName>('permission')
const statuses = ref<Record<ItemName, QuestionnaireItemStatus>>({
  permission: 'unanswered',
  verification: 'unanswered',
})

const unanswered = computed(() => statuses.value[item.value] === 'unanswered')

function setStatus(name: ItemName, status: QuestionnaireItemStatus) {
  statuses.value = { ...statuses.value, [name]: status }
}

function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)

  toast('Permissions saved', {
    description: `Permission: ${formData.get('permission') ?? 'None'} · Verification: ${formData.get('verification') ?? 'None'}`,
  })
}
</script>

<template>
  <Questionnaire
    v-model:item="item"
    class="mx-auto max-w-md"
    :items="items"
    @submit="handleSubmit"
  >
    <QuestionnaireProgress />

    <QuestionnaireItem
      name="permission"
      required
      @update:status="setStatus('permission', $event)"
    >
      <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
      @update:status="setStatus('verification', $event)"
    >
      <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>
  </Questionnaire>
</template>

Indikator Progres Kustom

Pakai state pada slot progres untuk membuat indikator sendiri. QuestionnaireProgress menyediakan current, total, first, dan last.

Checkpoint 1 of 4

How large is the change?

Small patch Feature-sized change Cross-package change

<script setup lang="ts">
import { toast } from 'vue-sonner'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

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

function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)

  toast('Pull request plan ready', {
    description: `Scope: ${formData.get('scope') ?? 'None'} · Commits: ${formData.get('strategy') ?? 'None'} · Tests: ${formData.get('tests') ?? 'None'} · Delivery: ${formData.get('delivery') ?? 'None'}`,
  })
}
</script>

<template>
  <Questionnaire
    class="mx-auto max-w-md"
    default-item="scope"
    :items="items"
    @submit="handleSubmit"
  >
    <QuestionnaireProgress v-slot="{ current, total }" class="w-full">
      <div aria-hidden="true" class="mb-2 flex gap-1.5">
        <span
          v-for="step in total"
          :key="step"
          class="h-1.5 flex-1 rounded-full"
          :class="step <= current ? 'bg-primary' : 'bg-muted'"
        />
      </div>
      <span>Checkpoint {{ current }} of {{ total }}</span>
    </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>
  </Questionnaire>
</template>

Item Beranimasi

Animasikan item yang sedang aktif sementara progres dan navigasinya tetap diam. Item aktif ditandai dengan data-active.

Question 1 of 3

What should the agent do?

Choose the task for this run.

Implement the requested change Debug the current behavior Review the implementation

<script setup lang="ts">
import { toast } from 'vue-sonner'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

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

const itemClass = 'data-active:animate-in data-active:fade-in-0 data-active:slide-in-from-bottom-2 data-active:duration-300 motion-reduce:animate-none'

function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)

  toast('Agent workflow saved', {
    description: `Task: ${formData.get('task') ?? 'None'} · Review: ${formData.get('review') ?? 'None'} · Delivery: ${formData.get('delivery') ?? 'None'}`,
  })
}
</script>

<template>
  <Questionnaire
    class="mx-auto max-w-md"
    default-item="task"
    :items="items"
    @submit="handleSubmit"
  >
    <QuestionnaireProgress />

    <QuestionnaireItem :class="itemClass" 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 :class="itemClass" 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 :class="itemClass" 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>

    <QuestionnaireActions>
      <QuestionnairePrevious />
      <QuestionnaireNext>
        Next
      </QuestionnaireNext>
      <QuestionnaireSubmit>
        Save workflow
      </QuestionnaireSubmit>
    </QuestionnaireActions>
  </Questionnaire>
</template>

Card

Padukan Questionnaire dengan slot Card tanpa mengorbankan makna judul dan keterangan pertanyaannya. Pakai as-child untuk menampilkan sebuah bagian sebagai komponen lain:

<QuestionnaireTitle as-child>
  <CardTitle>What should the agent work on?</CardTitle>
</QuestionnaireTitle>

What should the agent work on?

Choose the task that should be handled next.

Question 1 of 2

Fix the failing tests 1 Refactor the data layer 2 Update the integration guide 3

<script setup lang="ts">
import { toast } from 'vue-sonner'
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/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,
  },
] as const

function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)

  toast('Agent task created', {
    description: `Task: ${formData.get('task') ?? 'None'} · Handoff: ${formData.get('output') ?? 'None'}`,
  })
}
</script>

<template>
  <Questionnaire
    class="mx-auto max-w-md"
    default-item="task"
    :items="items"
    shortcuts="numbers"
    @submit="handleSubmit"
  >
    <Card>
      <QuestionnaireItem name="task" required>
        <CardHeader>
          <QuestionnaireTitle as-child>
            <CardTitle>What should the agent work on?</CardTitle>
          </QuestionnaireTitle>
          <QuestionnaireDescription as-child>
            <CardDescription>
              Choose the task that should be handled next.
            </CardDescription>
          </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 name="output" required>
        <CardHeader>
          <QuestionnaireTitle as-child>
            <CardTitle>What should the final handoff include?</CardTitle>
          </QuestionnaireTitle>
          <QuestionnaireDescription as-child>
            <CardDescription>
              Pick the level of detail needed for review.
            </CardDescription>
          </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>
  </Questionnaire>
</template>

QuestionnaireProgress, QuestionnaireTitle, QuestionnaireDescription, QuestionnaireChoices, QuestionnaireError, QuestionnaireActions, dan keempat tombol navigasinya sama-sama menerima as dan as-child. Memakai as-child pada judul akan menggantikan legend yang menamai item, sehingga item itu dilabeli oleh judul yang ditampilkan. Judul dan keterangannya tetap mempertahankan id dari anak yang mereka render.

Dialog

Padukan Questionnaire di dalam Dialog, sementara urusan membatalkan dan menutupnya tetap dipegang komponen induk.

<script setup lang="ts">
import { ref } from 'vue'
import { toast } from 'vue-sonner'
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/ui/questionnaire'

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

const open = ref(false)

function handleSubmit(event: Event) {
  event.preventDefault()

  const formData = new FormData(event.target as HTMLFormElement)

  open.value = false
  toast('Clarification sent', {
    description: `Scope: ${formData.get('scope') ?? 'None'} · Verification: ${formData.get('tests') ?? 'None'}`,
  })
}
</script>

<template>
  <Dialog v-model:open="open">
    <DialogTrigger as-child>
      <Button variant="outline">
        Open clarification
      </Button>
    </DialogTrigger>
    <DialogContent>
      <Questionnaire default-item="scope" :items="items" @submit="handleSubmit">
        <QuestionnaireItem name="scope" required>
          <DialogHeader>
            <QuestionnaireProgress />
            <QuestionnaireTitle as-child>
              <DialogTitle>Which files are in scope?</DialogTitle>
            </QuestionnaireTitle>
            <QuestionnaireDescription as-child>
              <DialogDescription>
                Choose how broadly the agent can update the workspace.
              </DialogDescription>
            </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 as-child>
              <DialogTitle>How much verification is needed?</DialogTitle>
            </QuestionnaireTitle>
            <QuestionnaireDescription as-child>
              <DialogDescription>
                Choose the checks the agent should run before handoff.
              </DialogDescription>
            </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 as-child>
            <Button type="button" variant="outline">
              Cancel
            </Button>
          </DialogClose>
          <QuestionnaireActions>
            <QuestionnairePrevious />
            <QuestionnaireNext>
              Next
            </QuestionnaireNext>
            <QuestionnaireSubmit>
              Send answer
            </QuestionnaireSubmit>
          </QuestionnaireActions>
        </DialogFooter>
      </Questionnaire>
    </DialogContent>
  </Dialog>
</template>

Navigasi Keyboard

Key	Description
Arrow Down	Moves focus to the next answer.
Arrow Up	Moves focus to the previous answer.
Arrow Right	Moves to the next question once the current one is answered.
Arrow Left	Moves to the previous question.
Enter	Confirms the focused answer and moves on, or submits on the last question.
Meta+Enter / Ctrl+Enter	Confirms the active question from anywhere in the form.
A – Z / 1 – 9	Selects the matching choice when shortcuts is set.

Aksesibilitas

QuestionnaireItem menghasilkan fieldset beserta legend, jadi tiap pertanyaan dibacakan bersama jawabannya. Keterangan dan pesan error dikaitkan ke item lewat aria-describedby, dan item yang belum valid menyertakan aria-invalid.

QuestionnaireProgress menghasilkan progressbar bernama yang membacakan pertanyaan saat ini. Item yang tidak aktif diberi hidden dan inert, jadi tidak ikut urutan Tab maupun pohon aksesibilitas.

Tombol navigasinya adalah tombol sungguhan. QuestionnaireSubmit mengirim form, jadi questionnaire tetap bekerja dengan autofill browser dan pengiriman form bawaan.

Referensi API

Questionnaire

Form terluar. Mengurus item aktif, progres, validasi, dan navigasi keyboard.

Prop	Type	Default	Description
items	QuestionnaireItemDefinition[]	-	Declares item order, required, disabled, and the choices used for shortcuts.
item	string	-	The active item. Use with v-model:item.
defaultItem	string	-	The item shown first. Ignored when item is provided.
shortcuts	"letters" | "numbers"	-	Assigns a keyboard shortcut to every choice.
noValidate	boolean	true	Set to false to run native constraint validation on answered items.
class	HTMLAttributes["class"]	-	Additional classes to apply to the form.

Emit	Payload	Description
update:item	string	The active item changed.
submit	Event	Every item is valid. Call event.preventDefault() to handle it yourself.
reset	Event	The form was reset. Call event.preventDefault() to keep the answers.

QuestionnaireProgress

Sebuah progressbar yang membacakan pertanyaan aktif. Menyediakan current, total, first, dan last ke slot bawaannya.

Prop	Type	Default	Description
class	HTMLAttributes["class"]	-	Additional classes to apply to the progress bar.
as	AsTag | Component	"div"	The element or component to render as.
asChild	boolean	false	Render the child element instead.

QuestionnaireItem

Satu pertanyaan, ditampilkan sebagai fieldset. Hanya item yang aktif yang terlihat.

Prop	Type	Default	Description
name	string	-	Required. The name the answer submits under.
required	boolean	false	Requires an answer before the questionnaire can continue.
multiple	boolean	false	Renders choices as checkboxes and keeps every selected answer.
disabled	boolean	false	Removes the item from the flow without unmounting it.
invalid	boolean	false	Marks the item invalid from outside, for example after schema validation.
class	HTMLAttributes["class"]	-	Additional classes to apply to the item.

Emit	Payload	Description
update:status	"unanswered" | "answered" | "skipped"	The item status changed.

QuestionnaireTitle

Teks pertanyaannya, ditampilkan sebagai legend.

Prop	Type	Default	Description
class	HTMLAttributes["class"]	-	Additional classes to apply to the title.
as	AsTag | Component	"legend"	The element or component to render as.
asChild	boolean	false	Render the child element instead.

QuestionnaireDescription

Teks bantuan yang dikaitkan ke item lewat aria-describedby.

Prop	Type	Default	Description
id	string	-	Overrides the generated id.
as	AsTag | Component	"p"	The element or component to render as.
asChild	boolean	false	Render the child element instead.
class	HTMLAttributes["class"]	-	Additional classes to apply to the description.

QuestionnaireChoices

Daftar jawaban. Membungkus pilihan-pilihan beserta isian bebas kalau ada.

Prop	Type	Default	Description
class	HTMLAttributes["class"]	-	Additional classes to apply to the list.
as	AsTag | Component	"div"	The element or component to render as.
asChild	boolean	false	Render the child element instead.

QuestionnaireChoice

Satu jawaban, ditampilkan sebagai radio atau checkbox tergantung jenis pertanyaannya.

Prop	Type	Default	Description
value	string	-	Required. The submitted value.
checked	boolean	-	Controlled checked state. Use with v-model:checked.
defaultChecked	boolean	false	Checks the choice on mount and after a native form reset.
disabled	boolean	false	Disables the choice.
class	HTMLAttributes["class"]	-	Additional classes to apply to the choice.

Emit	Payload	Description
update:checked	boolean	The choice was checked or cleared.
change	Event	The native change event.

QuestionnaireChoiceDescription

Teks tambahan di dalam sebuah pilihan.

Prop	Type	Default	Description
class	HTMLAttributes["class"]	-	Additional classes to apply to the description.

QuestionnaireInput

Jawaban bebas. Dianggap menjawab pertanyaan selama isiannya tidak kosong, dan dikirim memakai nama item tersebut.

Prop	Type	Default	Description
modelValue	string | number	-	Controlled value. Use with v-model.
defaultValue	string | number	-	Fills the answer on mount and after a native reset.
type	QuestionnaireInputType	"text"	The input type.
disabled	boolean	false	Disables the input.
class	HTMLAttributes["class"]	-	Additional classes to apply to the input.

QuestionnaireError

Pesan error item. Tersembunyi sampai item itu dinyatakan tidak valid, dan memakai pesan bawaan kalau Anda tidak menyediakannya.

Prop	Type	Default	Description
id	string	-	Overrides the generated id.
as	AsTag | Component	"p"	The element or component to render as.
asChild	boolean	false	Render the child element instead.
class	HTMLAttributes["class"]	-	Additional classes to apply to the error.

QuestionnaireActions

Baris tombol navigasi.

Prop	Type	Default	Description
class	HTMLAttributes["class"]	-	Additional classes to apply to the row.
as	AsTag | Component	"div"	The element or component to render as.
asChild	boolean	false	Render the child element instead.

QuestionnairePrevious, QuestionnaireSkip, QuestionnaireNext, dan QuestionnaireSubmit

Tombol-tombol navigasi. Masing-masing menyembunyikan diri saat tidak relevan: QuestionnairePrevious di item pertama, QuestionnaireSkip di item wajib, QuestionnaireNext di item terakhir, dan QuestionnaireSubmit di semua item selain yang terakhir.

Prop	Type	Default	Description
variant	ButtonVariants["variant"]	"outline" / "default"	The button variant.
size	ButtonVariants["size"]	"default"	The button size.
disabled	boolean	false	Disables the button.
as	AsTag | Component	"button"	The element or component to render as.
asChild	boolean	false	Render the child element instead.
class	HTMLAttributes["class"]	-	Additional classes to apply to the button.