Question
fandhe-frontend-wireframe-ui の質問項目風プレースホルダーです。ラベル + 任意の補足説明 + フォームコントロール + 任意のヒントという「1 つの質問項目」の配置イメージだけを示す非インタラクティブな部品です。API は question(label, description, control, hint, size) の 5 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。control は既存の wireframe-ui 部品(select/switch 等)の戻り値をそのまま渡す Node スロットです。
視覚的な参照元は blocks.pm の Question 部品ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。
ラベルは <label> ではなく div で出力し、<input>/<fieldset>/<legend> のいずれも実装しない表示専用プレースホルダーです。実際に操作可能な質問項目が必要な場合は Field(Themes) / Field(Primitives) を検討してください。
Demo
既定(説明・ヒントなし、select コントロール)
お住まいの都道府県は?
未選択
説明 + ヒント + 先頭アイコン付き select
担当者を選んでください
直近の対応履歴から自動で絞り込まれます
山田太郎
後から変更できます
switch をコントロールにした例
通知を受け取りますか?
重要なお知らせのみ届きます
通知
Sm
並び順
新着順
Lg
プラン
スタンダード
引数表
| 引数 | 型 | 既定値 | 説明 |
|---|---|---|---|
| label | &str | - | 質問文(常に太字で表示)。 |
| description | Option<&str> | None | 省略可能なラベル直下の補足説明。None のときはパート要素自体を出力しない。 |
| control | Node | - | フォームコントロールのスロット。select/switch 等の戻り値をそのまま渡す。呼び出し側は同じ size をコントロール側にも渡すこと。 |
| hint | Option<&str> | None | 省略可能なコントロール直下のヒント。None のときはパート要素自体を出力しない。 |
| size | Size | Size::Md | サイズ段階(xs〜xl)。ラベル・説明・ヒントのフォントサイズにのみ効く。 |
原案差分メモ
- API は独自設計:
docs/design/wireframe-ui-architecture.md§2 の保留(イシュー #2602)に従い、blocks.pm の Figma プロパティ構成を参照・書き写さず、docs/design/wireframe-ui-architecture.md§6 の汎用変換規約(Size軸 + テキスト + 省略可能テキスト + スロット)から独立に設計しました。 - コントロールは
Nodeスロットで受ける: 「Input short / …」のようなコントロール種別は専用の variant を持たず、select/switch等の wireframe-ui 部品の戻り値をそのまま渡すcontrol: Node引数へ委ねます(設計文書 §6「instance swap はNodeスロット引数で受ける」の典型)。question自身がテキストフィールド anatomy を内蔵する案は、Forms A の任意部品を差し込める柔軟性を失うため採りませんでした。 - 表示状態軸を持たない:
Bold/Primary/Active/Disabledはいずれも使いません。ラベルは常に太字で、表示状態はスロットに渡すコントロール側(select(..., Active(true), ...)等)が担います。questionルートにはdata-*を一切付与しません。 sizeは呼び出し側がコントロールにも渡す規約:questionのsizeはラベル/説明/ヒントのフォントサイズにのみ効きます。コントロールの高さ・フォントサイズは制御しないため、同じsizeをcontrol側にも渡すことを推奨します。<label>・<input>・<fieldset>・<legend>は出力しない: 非対話制約(docs/design/wireframe-ui-architecture.md§7)により、for関連付けのない<label>も含め対話要素風の意味論に踏み込む要素は一切出力しません。- スクリーンショット非掲載:
docs/design/reference-screenshots/への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。 - 配色はグレースケール:
--fw-wire-ink/--fw-wire-ink-mutedトークンのみを使い、ColorPaletteには依存しません。