Accordion

開閉可能なセクションで情報を折りたたんで表示するコンポーネント。

Installation

npx shadcn@latest add https://kasumi-ui.vercel.app/r/accordion.json

Usage

import { 
  Accordion, 
  AccordionItem, 
  AccordionTrigger, 
  AccordionContent 
} from "@/components/ui/accordion";

<Accordion type="single" collapsible>
<AccordionItem value="item-1">
  <AccordionTrigger>日程調整の方法は？</AccordionTrigger>
  <AccordionContent>
    カレンダーから候補日を選択し、参加可能な時間帯をチェックしてください。
  </AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
  <AccordionTrigger>回答期限はありますか？</AccordionTrigger>
  <AccordionContent>
    作成者が設定した期限までに回答してください。
  </AccordionContent>
</AccordionItem>
</Accordion>

Multiple

type="multiple" を指定すると、複数の項目を同時に開くことができます。

<Accordion type="multiple">
<AccordionItem value="item-1">
  <AccordionTrigger>アカウント設定</AccordionTrigger>
  <AccordionContent>
    プロフィール情報やメールアドレスの変更ができます。
  </AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
  <AccordionTrigger>通知設定</AccordionTrigger>
  <AccordionContent>
    メール通知やプッシュ通知のオン・オフを切り替えられます。
  </AccordionContent>
</AccordionItem>
</Accordion>

Default Value

defaultValue で初期表示時に開いておく項目を指定できます。

この項目は defaultValue で初期表示時に開かれています。

<Accordion type="single" collapsible defaultValue="item-2">
<AccordionItem value="item-1">
  <AccordionTrigger>セクション 1</AccordionTrigger>
  <AccordionContent>セクション 1 のコンテンツです。</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
  <AccordionTrigger>セクション 2（初期表示で開く）</AccordionTrigger>
  <AccordionContent>この項目は初期表示時に開かれています。</AccordionContent>
</AccordionItem>
</Accordion>

Props

PropTypeDefaultDescription
type"single" | "multiple"-単一選択か複数選択かを指定（必須）
collapsiblebooleanfalsetype="single" のとき、開いている項目を閉じられるようにする
defaultValuestring | string[]-初期表示で開く項目の値