kaze風
DescriptionList
用語と説明のペアを表示する定義リストコンポーネント。
プレビュー
縦並び
- プロジェクト名
- Kaze Design System
- バージョン
- v0.1.0
- ライセンス
- MIT License
横並び
- ステータス
- 公開中
- 最終更新
- 2026年2月19日
- コンポーネント数
- 54
使いどころ
使う場面
- 項目名と値の組を並べる（詳細画面のプロフィール、注文情報、設定の確認など）
- 項目名が短く値が長いときは horizontal で横並びにする。スマホでは縦に積む
- 区切り線が欲しいときは bordered を付ける
使わない場面
- 同じ項目名の行が何件も続くデータ。列で比較できる Table を使う
- 項目名のない並び。List を使う
- 時刻順の出来事。Timeline を使う
- 編集できる入力欄。FormField と Input を使う
使い方
{/* 縦並び + ボーダー */}
<DescriptionList bordered>
<DescriptionItem term="プロジェクト名">Kaze Design System</DescriptionItem>
<DescriptionItem term="バージョン">v0.1.0</DescriptionItem>
</DescriptionList>
{/* 横並び */}
<DescriptionList horizontal>
<DescriptionItem term="ラベル">値</DescriptionItem>
</DescriptionList>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
horizontal | boolean | false | 用語と説明を横並びで表示（DescriptionList） |
bordered | boolean | false | 各項目に下線ボーダーを表示（DescriptionList） |
children必須 | ReactNode | なし | 説明・値（DescriptionItem） |
term | React.ReactNode | なし | 用語・ラベル（DescriptionItem） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- <dl>、<dt>、<dd> で出力され、項目名と値の対応が支援技術に伝わる
- 1 組は DescriptionItem で包み、term に項目名、children に値を渡す。出力は <div> で包んだ <dt> と <dd> の 1 組
- 値が空のときは「未設定」のように言葉で示す。空の <dd> は読み上げで途切れて聞こえる
文言
- 項目名は名詞で短く（「メールアドレス」「契約プラン」）。末尾に「:」は付けない
- 値は単位を含めて書く（「12 席」「2026 年 10 月 29 日」）。日付や数の書式は画面全体で揃える