Definition List
「ラベル + 値」のペアで属性情報を表示するコンポーネント。顧客詳細画面のプロフィール表示など、テーブルにするほどではない少数の属性を見せる場面で使用します。
プレビュー
1 項目あたりラベル(14px Bold / グレー) + 値(16px Regular / 黒)の構成。下に薄い区切り線が入ります。
- 顧客名
- 加藤 太郎
実例: 顧客プロフィール
Figma 例にある「顧客情報の縦並び」表示。複数の
DefinitionList をスタックして使います。- 氏名
- 加藤 太郎
- メールアドレス
- aaaaaaa@gmail.com
- 会社名
- 株式会社〇〇
- 年齢
- 42
- 性別
- 男性
値部分の応用
値の部分はテキストに限らず、リンクや複数行テキストなども入れられます。
リンク
- メールアドレス
- aaaaaaa@gmail.com
- ホームページ
- example.com ↗
複数行のテキスト
- 住所
- 〒100-0001
東京都千代田区千代田1-1
サンプルビル 8F
左右レイアウトでまとめる
- 氏名
- 加藤 太郎
- 年齢
- 42
- 性別
- 男性
- プラン
- プレミアム
仕様
- ラベル (label)14px / Bold / #6B7280 (text-secondary) / line-height 1.25
- 値 (value)16px / Regular / #1F2937 (text-primary) / line-height 1.5
- 上下のラベル⇔値間隔4px (spacing-x3s)
- 左右のラベル⇔値間隔48px (spacing-xl)
- 下線1px solid #D1D5DB (border)
- 下線までの padding4px (spacing-x3s)
- HTML<dl><dt>ラベル</dt><dd>値</dd></dl>
利用基準
使うべき時
- 顧客詳細・契約情報など、テーブルにするほどではない少数の属性表示に使う
- ラベルは「氏名」「会社名」など短く、関係を一目で理解できる言葉にする
- 項目数が多くて値が長い → 上下レイアウトを使う
- 項目数が少なく値が短い → 左右レイアウトを使う
- 値にリンクや複数行テキストを差し込み、属性に合った表示にする
使わない時
- ラベル無しで値だけを並べる → 単なる段落として書く
- 数十件の属性を一覧表示する → Table コンポーネントを使う
- 編集可能な入力欄にする → Input コンポーネントを使う
- 上下と左右を 1 つの画面内で混在させる (視線の流れが乱れる)