Questionnaire

単一選択、複数選択、自由入力、スキップ可能な質問に対応した複数ステップのアンケート。

Question 1 of 3

エージェントが次に取り組むべきことは何ですか？

方向性を選択するか、別のタスクを記述してください。

ツール呼び出しのタイムラインエージェントが実行した内容と返ってきた結果を表示します。承認チェックポイント機密性の高い操作や破壊的な操作の前に確認を求めます。サブエージェントへの引き渡し委任された作業と結果を追いやすくします。

"use client"

import * as React from "react"

インストール


pnpm dlx shadcn@latest add questionnaire

使用法

import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire"

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

コレクションを一度定義し、Questionnaire に渡すことで、進行状況・アクション・ショートカットをサーバーでレンダリングし、それを各パーツにマッピングします。

<Questionnaire items={items} onSubmit={handleSubmit}>
  <QuestionnaireProgress />
  {items.map((question) => (
    <QuestionnaireItem
      key={question.name}
      name={question.name}
      required={question.required}
    >
      <QuestionnaireTitle>{question.prompt}</QuestionnaireTitle>
      <QuestionnaireDescription>
        {question.description}
      </QuestionnaireDescription>
      <QuestionnaireChoices>
        {question.choices.map((choice) => (
          <QuestionnaireChoice key={choice.value} value={choice.value}>
            <span className="font-medium">{choice.label}</span>
            {"description" in choice ? (
              <span className="text-muted-foreground">
                {choice.description}
              </span>
            ) : null}
          </QuestionnaireChoice>
        ))}
        {"input" in question ? (
          <QuestionnaireInput
            aria-label={question.input.label}
            placeholder={question.input.placeholder}
          />
        ) : null}
      </QuestionnaireChoices>
      <QuestionnaireError />
    </QuestionnaireItem>
  ))}
  <QuestionnaireActions>
    <QuestionnairePrevious />
    <QuestionnaireSkip />
    <QuestionnaireNext />
    <QuestionnaireSubmit />
  </QuestionnaireActions>
</Questionnaire>

function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault()
  const answers = new FormData(event.currentTarget)
  // answers.get("direction"), answers.getAll(...) for multiple items.
}

構成

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

Questionnaire は、順序付けられた項目、アクティブな項目、回答の状態、検証、進行状況、ナビゲーションを管理します。それを含むページ、カード、ダイアログ、ドロワーは、クローズやキャンセルの動作、永続化、トランスポート、分岐を管理します。

サーバーレンダリング

items を渡すと、アクティブな項目、進行状況、アクション、回答のショートカットがサーバーでレンダリングされます。完全な動作については、headless Questionnaire を参照してください。

複数選択

複数の固定回答を受け入れる項目には multiple を使用します。

"use client"

import * as React from "react"

自由入力

ユーザーが別の回答を提供できる場合は、固定の選択肢を使用して QuestionnaireInput を作成します。

"use client"

import * as React from "react"

明示的なスキップ

オプションの項目が意図的に未回答のままになっている可能性がある場合は、QuestionnaireSkip を追加します。

"use client"

import * as React from "react"

ショートカット

shortcuts を使用して、各回答に文字または数字キーを割り当てます。

"use client"

import * as React from "react"

カスタム検証

制御されたナビゲーションと Zod などの外部スキーマを組み合わせて、無効な項目に戻り、そのエラーを表示します。

"use client"

import * as React from "react"

制御

無効なステップに戻るなど、ホスト状態からアクティブな項目を制御します。

現在のチェックポイント: 変更範囲

"use client"

import * as React from "react"

再開

保存されたアクティブな項目とデフォルトの回答を復元し、変更をその保存された状態にリセットします。

"use client"

import * as React from "react"

条件付き項目

ユーザーの以前の回答に該当しない項目を無効にします。

"use client"

import * as React from "react"

ナビゲーション状態

アイテムのステータスを読み取り、無効なナビゲーションとカスタムアクションスタイルをオプトインします。

"use client"

import * as React from "react"

カスタム進行状況

進行状況レンダリング状態を使用して、カスタム進行状況インジケーターを作成します。

"use client"

import * as React from "react"

アニメーション付き項目

進行状況とナビゲーションを静止させたまま、アクティブな項目をアニメーション化します。

"use client"

import * as React from "react"

カード

質問のタイトルと説明のセマンティックを維持しながら、カードスロットを使用してアンケートを作成します。

"use client"

import * as React from "react"

ダイアログ

キャンセルと閉じる操作をホスト側で管理しながら、ダイアログ内にアンケートを構成します。

"use client"

import * as React from "react"

アクセシビリティ

QuestionnaireItem は fieldset を、QuestionnaireTitle はその legend をレンダリングします。説明とアクティブなエラーは現在の項目に関連付けられ、無効な項目や回答コントロールには aria-invalid が付与されます。

固定の選択肢はネイティブのラジオボタンおよびチェックボックスの動作を保持します。進行状況は名前付きのプログレスバーとして公開され、ナビゲーションには実際のボタンが使用されます。非アクティブな項目とアクションは非表示かつ操作不可になります。ナビゲーションに成功すると新しくアクティブになった項目にフォーカスが移り、検証に失敗すると利用可能な回答コントロールにフォーカスが移ります。

QuestionnaireInput には、表示ラベル、aria-label、aria-labelledby のいずれかを使って必ずアクセシブルな名前を付けてください。プレースホルダーはラベルの代わりにはなりません。カスタムな構成のラベル付けと完全なキーボード操作については、アンケートアクセシビリティガイドを参照してください。

スタイルなし

Questionnaire の動作は @shadcn/react パッケージに由来します。独自のマークアップとスタイルでそのまま使用する方法については、@shadcn/react の Questionnaire を参照してください。

各パーツのプロパティ、データ属性、レンダリング状態は @shadcn/react Questionnaire ページに記載されています。スタイル付きコンポーネントは、対応する非スタイルコンポーネントのプロパティを継承します。ナビゲーションコンポーネントは Button の size および variant プロパティも受け付けます。また、QuestionnaireActions はスタイル専用のレイアウトヘルパーです。

Progress Radio Group

shadcn/uiアプリをVercelにデプロイ

OpenAI、Sonos、Adobeなどに採用されています。

Vercelは、アプリや機能を大規模にデプロイするためのツールとインフラを提供します。