Questionnaire

fandhe-frontend-pre-styled-ui の questionnaire mod が提供するスタイル済み Questionnaire 部品です。shadcn/ui Questionnaire 相当の多段質問 UI を Root / Progress / Question / Prompt / Description / Options / Freeform / Actions / Back / Next / Skip の 11 パーツ構成で表現します。

headless-ui の Questionnaire 状態機械（count = 全質問数、step = 現在位置）へ薄く委譲する層であり、size / colorPalette のような見た目クラス軸は持ちません。全パーツ関数が state: &Questionnaire を第 1 引数に取り、内部で headless 層の同名メソッドへ委譲します。見た目は headless が出力する data-state（active / completed / upcoming）・data-answered / data-skipped / data-required / data-invalid / data-disabled / data-complete を CSS セレクタとして参照するだけで切り替わります。

質問（question）は非 active（completed / upcoming）のとき常に hidden 属性を伴います。そのため data-state="completed" / "upcoming" の枠色・破線表現が実際に可視化されるのは、アプリケーション側が独自 CSS で [hidden] を打ち消して一覧表示する場合（回答レビュー画面等）に限られ、既定表示は active な質問 1 件のみです。

progress は中身空の role="progressbar" な div です。スタイル済み Progress 部品を入れ子にはせず、step / count から計算した百分率を --fandhe-questionnaire-percent custom property として style へ設定し、CSS の linear-gradient で塗り幅を表現します。ステップ遷移後にこの塗りを更新するのはアプリケーション（クライアントランタイム）側の責務であり、fandhe-frontend-wasm-full の back/next/skip 配線はこの custom property 自体を更新しません。

options スロットは純スロットで、呼び出し側がスタイル済み RadioGroup / CheckboxGroup の item を入れ子にする契約です。本部品の CSS は options 配下の RadioGroup / CheckboxGroup item をカード状（枠線 + パディング）に整形する子孫セレクタを含みますが、item 自体の基本規則は含まないため、呼び出し側は RadioGroup / CheckboxGroup 自身の CSS も併せて読み込む必要があります。freeform スロットも同様の純スロットで、Field の label や Textarea を入れ子にする用途を想定します。

回答値の保持・検証（必須判定）・分岐（次にどの質問へ進むか）・送信はアプリケーションロジックであり、この部品では実装しません。next / skip の無効化は、必須判定の結果（真偽）だけを呼び出し側が引数として渡す契約です。

Demo

shadcn/ui Questionnaire 相当の多段質問部品。進捗ゲージ・質問カード・choice card 風の options（RadioGroup を入れ子）・自由記述（field::textarea を入れ子）・completed/upcoming/skipped の各状態を、無 JS の docs サイト向けに静的表示で掲示します（可視の active な質問は各インスタンスとも 1 件のみ）。

ご利用の目的を選んでください

最も近いものを 1 つ選択してください。

個人利用チーム利用

ご意見・ご要望をお聞かせください

ご意見

必須項目です。

ご回答ありがとうございました。

Features

count（全質問数）/step（現在位置）を持つ headless Questionnaire 状態機械への薄い委譲層。全 11 パーツ関数が state: &Questionnaire を第 1 引数に取る。
size/colorPalette のような見た目クラス軸は持たず、headless の data-state（active/completed/upcoming）・data-answered・data-skipped・data-required・data-invalid・data-disabled・data-complete を CSS セレクタとして参照するのみ。
progress は styled progress を入れ子にせず、step/count から百分率を計算した --fandhe-questionnaire-percent を style へ設定し、CSS の linear-gradient で塗り幅を表現する。
options スロットへ入れ子にした RadioGroup/CheckboxGroup の item を choice card 風に整形する子孫セレクタを持つ（RadioGroup/CheckboxGroup 自身の stylesheet() 併用が必要）。

Anatomy

root
  progress
  question
    prompt
    description
    options
  actions
    back
    skip
    next
    freeform

API Reference

Arguments

Name	Type	Default	Description
`state`	`&Questionnaire`	—	count/step/orientation を保持する headless 状態機械（fandhe_frontend_headless_ui::questionnaire::Questionnaire）。
`props`	`QuestionProps`	`QuestionProps::default()`	answered/skipped/required/invalid の 4 存在属性フラグ（questionnaire::question の第 3 引数）。
`index`	`usize`	—	質問のインデックス（0..count、questionnaire::question の第 2 引数）。
`disabled`	`bool`	`false`	back/next/skip を強制的に無効化する（questionnaire::back/next/skip の第 2 引数）。
`label`	`&str`	`""`	progress の aria-label（questionnaire::progress の第 2 引数）。空文字なら付与しない。

Data Attributes

Part	Attribute	Observed Values
`next`	`data-disabled`	（値なし）
`progress`	`data-complete`	（値なし）
`question`	`data-answered`	（値なし）
`question`	`data-index`	`0`, `1`, `2`
`question`	`data-invalid`	（値なし）
`question`	`data-required`	（値なし）
`question`	`data-skipped`	（値なし）
`question`	`data-state`	`active`, `completed`, `upcoming`
`root`	`data-complete`	（値なし）
`root`	`data-orientation`	`horizontal`
`root`	`data-step`	`1`, `3`
`skip`	`data-disabled`	（値なし）

CSS Variables

Variable	Default
`--fandhe-questionnaire-percent`	`0%`
`--fandhe-questionnaire-progress-height`	`0.375rem`

Accessibility

Keyboard Interactions

Key	Description
Tab / Shift+Tab	back/next/skip（ネイティブ button）間、および options/freeform に入れ子にした部品内のフォーカス移動。
Enter / Space	フォーカス中の back/next/skip をアクティブ化する（ネイティブ button）。

WAI-ARIA

Attribute	Description
role="progressbar"	progress パーツへ固定付与し、aria-valuemin/aria-valuemax/aria-valuenow/aria-valuetext を伴う（headless questionnaire.rs）。
aria-invalid="true"	QuestionProps.invalid が true のとき question（fieldset）へ付与する。
hidden	非 active（completed/upcoming）な question へ常に付与する。