開閉可能なコンテンツを表示するコンポーネント。内部ではネイティブの<details>要素と<summary>要素を使用

Example#

Props#

NameTypeDefaultDescription
buttonId
optional
string-開閉をトリガーするsummary要素に付与するネイティブ要素の`id`属性。ページで固有のIDを指定
children
required
ReactNode-コンテンツとして表示する内容。開閉で表示・非表示が切り替わる
data-*
optional
string-Custom data attributes
header
required
string-見出しに表示するテキスト
id
optional
string-ラッパーであるdetails要素に付与するネイティブ要素の`id`属性。ページで固有のIDを指定
initialOpen
optional
boolean-初期状態で開く
size
'small'
'medium'
'medium'サイズ

Usage#

  • コンテンツ量が多く、他コンテンツの閲覧を妨害してしまう
  • 優先度が低く、閲覧のニーズが少ない
  • Q&Aページのように、1ページに多数のコンテンツを表示する必要がある

などのケースで利用します。

重要なコンテンツを <Accordion> に含める場合は注意#

アコーディオンにコンテンツを配置することで、閲覧のハードルが上がります。

  • 開閉するために1アクション必要
  • ページをスクロールしてもコンテンツの内容を閲覧することができない

例えばリンクなどを <Accordion> 内部に配置した場合、遷移するユーザーが減少する場合があります。

Keyboard Interaction#

  • ヘッダーはフォーカスを受け取ります
    • EnterまたはSpaceキーを押下することで、コンテンツ部分を開閉することができます