プリミティブの選び方

用途や操作方法に合わせて、適切な UI プリミティブを選ぶためのガイド。

このページでは、用途や操作方法に応じて Dialog、Popover、Tooltip、Accordion、Collapsible のどれを選べばよいかをまとめます。

	Dialog	Popover	Tooltip
目的	モーダルタスクや確認	リッチなインタラクティブポップアップ	短い補足テキスト
モーダル	はい — ページ操作をブロック	いいえ — 非モーダル	いいえ
ネイティブ API	`<dialog>` + `showModal()`	Popover API	なし（配置コンテンツ）
典型的なコンテンツ	フォーム、確認、設定	メニュー、ピッカー、アカウントパネル	ラベル、ヒント、ショートカット
閉じ方	Escape、閉じるボタン、任意の背景クリック	Escape、外側クリック、閉じるボタン	ポインターを外す、Escape、フォーカスを外す
フォーカス	ダイアログ内に制限	開くとポップオーバー内へ移動	ホバーではトリガーに留まり、キーボード操作では内容へ移動可能
選ぶとき	続行前にタスク完了が必要	文脈を離れず関連コンテンツを探索	パネルを開かず短いヒントが必要

Accordion vs Collapsible

	Accordion	Collapsible
目的	関連する開閉アイテムのグループ	単一の独立した開閉領域
構造	1 ホスト内の複数アイテム	1 トリガー + 1 パネル
基本構造	`<details>` / `<summary>`	ボタン + 任意のパネル要素
グループ化	`details[name]` または `data-accordion-single` で、同時に 1 つだけ開く設定が可能	グループ化なし。各ホストが独立して動作
選ぶとき	FAQ リスト、設定セクション、フィルターグループ	1 つの「もっと見る」領域、サイドバーセクション、オプション詳細ブロック

Accordion のネイティブ方式と制御方式

	ネイティブ方式（`<details>`）	制御方式（`<div>`）
セマンティクス	`<summary>` によるブラウザ標準の開閉	ARIA 属性を設定したボタン + パネル
アニメーション	任意の `::details-content`（対応ブラウザのみ）	パネルサイズの CSS 変数 + 開閉用の状態属性
単一オープン	`<details name="group">`（ネイティブ）	ホストの `data-accordion-single`
選ぶ基準	構造が単純で、ブラウザ標準の開閉動作を利用できる	計測した高さを使ったアニメーションが必要な場合

計測した高さのアニメーションが必要な場合だけ制御方式を使います。詳しくは Accordion を参照してください。