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

Installation

pnpm dlx kliping@latest add questionnaire

Usage

<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>

Composition

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.

Features

• 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.

Examples

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.

Accessibility

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.

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, reka-ui@^2.10.3
Kliping items	button
Files	components/ui/questionnaire/questionnaire.vue components/ui/questionnaire/questionnaire-actions.vue components/ui/questionnaire/questionnaire-choice.vue components/ui/questionnaire/questionnaire-choice-description.vue components/ui/questionnaire/questionnaire-choices.vue components/ui/questionnaire/questionnaire-description.vue components/ui/questionnaire/questionnaire-error.vue components/ui/questionnaire/questionnaire-input.vue components/ui/questionnaire/questionnaire-item.vue components/ui/questionnaire/questionnaire-next.vue components/ui/questionnaire/questionnaire-previous.vue components/ui/questionnaire/questionnaire-progress.vue components/ui/questionnaire/questionnaire-skip.vue components/ui/questionnaire/questionnaire-submit.vue components/ui/questionnaire/questionnaire-title.vue components/ui/questionnaire/index.ts components/ui/questionnaire/use-questionnaire.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Questionnaire>
  <QuestionnaireProgress />
  <QuestionnaireItem>
    <QuestionnaireTitle />
    <QuestionnaireDescription />
    <QuestionnaireChoices>
      <QuestionnaireChoice />
      <QuestionnaireInput />
    </QuestionnaireChoices>
    <QuestionnaireError />
    <QuestionnaireProgress />
    <QuestionnaireInput />
  </QuestionnaireItem>
  <QuestionnaireActions>
    <QuestionnairePrevious />
    <QuestionnaireNext />
    <QuestionnaireSubmit />
    <QuestionnaireSkip />
  </QuestionnaireActions>
</Questionnaire>

Bagian lain yang tersedia: QuestionnaireChoiceDescription.

API Reference

Questionnaire

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

Prop	Type	Default	Description
defaultItem?	string	—	Item shown first. Ignored when item is provided.
item?	string	—	Controlled active item. Use with v-model:item.
items?	readonly QuestionnaireItemDefinition[]	—	Declares the item order, and the choice order shortcuts are assigned in.
noValidate?	boolean	true	Set to false to run native constraint validation on answered items.
shortcuts?	QuestionnaireShortcutMode	—	Assigns a keyboard shortcut to every choice.

Event	Payload	Description
@reset	[event: Event]	The form was reset.
@submit	[event: Event]	The form was submitted.
@update:item	[item: string]	The open question changed. Bind with v-model:item.

Slot	Props
#default	{ current: number; first: boolean; last: boolean; total: number; }

Data attribute	Value
[data-slot]	"questionnaire"
[data-shortcuts]	QuestionnaireShortcutMode

QuestionnaireProgress

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

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	{ current: number; first: boolean; last: boolean; total: number; }

Data attribute	Value
[data-slot]	"questionnaire-progress"
[data-current]	set at runtime
[data-first]	set at runtime
[data-last]	set at runtime
[data-total]	set at runtime

QuestionnaireItem

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

Prop	Type	Default	Description
disabled?	boolean	false	Excludes the item from the questionnaire without unmounting it.
invalid?	boolean	false	Marks the item invalid from outside, for example after schema validation.
multiple?	boolean	false	Renders choices as checkboxes and keeps every selected answer.
name	string	—	Submitted under this name, and used to activate the item.
required?	boolean	false	Requires an answer before the questionnaire can continue.

Event	Payload	Description
@update:status	[status: QuestionnaireItemStatus]	The question status changed. Bind with v-model:status.

Slot	Props
#default	{ active: boolean; invalid: boolean; status: QuestionnaireItemStatus; }

Data attribute	Value
[data-slot]	"questionnaire-item"
[data-active]	set at runtime
[data-disabled]	boolean
[data-invalid]	boolean
[data-multiple]	boolean
[data-required]	boolean
[data-status]	set at runtime

QuestionnaireTitle

Teks pertanyaannya, ditampilkan sebagai legend.

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"legend"	The element or component this component should render as. Can be overwritten by asChild.
id?	string	—	The id of the rendered element.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"questionnaire-title"

QuestionnaireDescription

Teks bantuan yang dikaitkan ke item lewat aria-describedby.

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"p"	The element or component this component should render as. Can be overwritten by asChild.
id?	string	—	Overrides the generated id.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"questionnaire-description"

QuestionnaireChoices

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

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	{ shortcuts: QuestionnaireShortcutMode | null; }

Data attribute	Value
[data-slot]	"questionnaire-choices"
[data-shortcuts]	set at runtime

QuestionnaireChoice

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

Prop	Type	Default	Description
checked?	boolean	undefined	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.
value	string	—	Submitted as the answer of the parent item.

Event	Payload	Description
@change	[event: Event]	Native change event of the input.
@update:checked	[checked: boolean]	The choice was checked or unchecked. Bind with v-model:checked.

Slot	Props
#default	{ checked: boolean; disabled: boolean; shortcut: string | null; type: string; }

Data attribute	Value
[data-slot]	"questionnaire-choice"
[data-checked]	boolean
[data-disabled]	boolean
[data-invalid]	set at runtime
[data-shortcut]	set at runtime
[data-type]	set at runtime
[data-unchecked]	set at runtime

QuestionnaireChoiceDescription

Teks tambahan di dalam sebuah pilihan.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"questionnaire-choice-description"

QuestionnaireInput

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

Prop	Type	Default	Description
defaultValue?	string | number	—	Fills the answer on mount and after a native form reset.
disabled?	boolean	false	Disables the input.
modelValue?	string | number	—	Controlled value. Use with v-model.
type?	QuestionnaireInputType	"text"	The input type.

Event	Payload	Description
@update:modelValue	[value: string]	Emitted when the value changes.

Data attribute	Value
[data-slot]	"questionnaire-input-wrapper"
[data-disabled]	boolean
[data-empty]	set at runtime
[data-filled]	set at runtime
[data-invalid]	set at runtime

QuestionnaireError

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

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"p"	The element or component this component should render as. Can be overwritten by asChild.
id?	string	—	Overrides the generated id.

Slot	Props
#default	{ invalid: boolean; }

Data attribute	Value
[data-slot]	"questionnaire-error"
[data-invalid]	set at runtime

QuestionnaireActions

Baris tombol navigasi.

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"questionnaire-actions"

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.

QuestionnaireNext

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"button"	The element or component this component should render as. Can be overwritten by asChild.
disabled?	boolean	false	Prevents the user from interacting with it.
size?	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"	"default"	The visual size.
variant?	"default" | "destructive" | "ghost" | "outline" | "secondary" | "link"	"default"	The visual style.

Event	Payload	Description
@click	[event: MouseEvent]	The button was clicked, before moving to the next question.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"questionnaire-next"
[data-disabled]	boolean
[data-hidden]	set at runtime
[data-shortcut]	set at runtime
[data-size]	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"
[data-status]	set at runtime
[data-variant]	"default" | "destructive" | "ghost" | "outline" | "secondary" | "link"
[data-visible]	set at runtime

QuestionnairePrevious

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"button"	The element or component this component should render as. Can be overwritten by asChild.
disabled?	boolean	false	Prevents the user from interacting with it.
size?	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"	"default"	The visual size.
variant?	"default" | "destructive" | "ghost" | "outline" | "secondary" | "link"	"outline"	The visual style.

Event	Payload	Description
@click	[event: MouseEvent]	The button was clicked, before moving to the previous question.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"questionnaire-previous"
[data-disabled]	boolean
[data-hidden]	set at runtime
[data-size]	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"
[data-status]	set at runtime
[data-variant]	"default" | "destructive" | "ghost" | "outline" | "secondary" | "link"
[data-visible]	set at runtime

QuestionnaireSkip

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"button"	The element or component this component should render as. Can be overwritten by asChild.
disabled?	boolean	false	Prevents the user from interacting with it.
size?	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"	"default"	The visual size.
variant?	"default" | "destructive" | "ghost" | "outline" | "secondary" | "link"	"outline"	The visual style.

Event	Payload	Description
@click	[event: MouseEvent]	The button was clicked, before skipping the question.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"questionnaire-skip"
[data-disabled]	boolean
[data-hidden]	set at runtime
[data-size]	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"
[data-status]	set at runtime
[data-variant]	"default" | "destructive" | "ghost" | "outline" | "secondary" | "link"
[data-visible]	set at runtime

QuestionnaireSubmit

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"button"	The element or component this component should render as. Can be overwritten by asChild.
disabled?	boolean	false	Prevents the user from interacting with it.
size?	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"	"default"	The visual size.
variant?	"default" | "destructive" | "ghost" | "outline" | "secondary" | "link"	"default"	The visual style.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"questionnaire-submit"
[data-disabled]	boolean
[data-hidden]	set at runtime
[data-shortcut]	set at runtime
[data-size]	"default" | "sm" | "xs" | "icon-xs" | "lg" | "icon" | "icon-sm" | "icon-lg"
[data-status]	set at runtime
[data-variant]	"default" | "destructive" | "ghost" | "outline" | "secondary" | "link"
[data-visible]	set at runtime

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --background, --border, --destructive, --input, --muted, --muted-foreground, --primary, --primary-foreground, --radius, --ring.