コンポーネント一覧
Accordion
検索で見つけたい情報は隠さない。折りたたむと Ctrl+F で見つからなくなる。
デモ
使い分け
こうする
- 読まなくても先に進める補足（FAQ・仕様）に使う
こうしない
- 必ず読ませる内容を畳まない
- フォームの必須項目を Accordion の中に隠さない
Props
| 名前 | 型 | 説明 |
|---|---|---|
| variant | 'solid' | 'outline' | 'soft' | 'ghost' | 'plain' | |
| size | 'sm' | 'md' | 'lg' | |
| allowsMultipleExpanded | boolean | 同時に複数を開けるようにする |
| expandedKeys | string[] | |
| defaultExpandedKeys | string[] | |
| onExpandedChange | (keys: string[]) => void | |
| isDisabled | boolean | |
| disabledKeys | string[] | |
| children | ReactNode | |
| classNames | ClassNames<typeof accordionSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- item必須
- heading必須
- trigger必須
- indicator
- panel必須
アクセシビリティ
| キー | 動作 |
|---|---|
| Enter / Space | 開閉 |
| Tab | 見出しを順に移動 |
- 見出しは heading の中の button として提示され、Enter / Space で開閉する。 展開状態は `aria-expanded`、パネルとの対応は `aria-controls` で伝わる
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。