Caroa UI

Accordion

折りたたみ可能なコンテンツセクション。

インポート

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@caroainc/ui-components/accordion'

基本的な使い方

Loading...
<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>アコーディオン1</AccordionTrigger>
    <AccordionContent>
      アコーディオン1の内容です。
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>アコーディオン2</AccordionTrigger>
    <AccordionContent>
      アコーディオン2の内容です。
    </AccordionContent>
  </AccordionItem>
</Accordion>

複数開く（multiple）

Loading...
<Accordion type="multiple">
  ...
</Accordion>

無効化されたアイテム

AccordionItemにdisabledを指定すると、そのアイテムだけ開閉できなくなります。

Loading...
<AccordionItem value="item-2" disabled>
  <AccordionTrigger>無効化されている</AccordionTrigger>
  <AccordionContent>開閉できません</AccordionContent>
</AccordionItem>

縦向き・横向き（orientation）

orientationはRadix UIのAccordionPrimitive.Rootのpropで、キーボード操作（矢印キー）の方向を 切り替えます。レイアウト自体はclassNameで調整してください。デフォルトは'vertical'です。

{/* デフォルト: 上下矢印キーでアイテム間を移動 */}
<Accordion type="single" collapsible orientation="vertical">...</Accordion>
 
{/* 左右矢印キーでアイテム間を移動（横並びレイアウトと組み合わせる想定） */}
<Accordion type="single" collapsible orientation="horizontal">...</Accordion>

Props

Accordion

PropTypeDefaultDescription
type*'single' | 'multiple'-単一選択か複数選択か
collapsiblebooleanfalsetype="single"時、全て閉じることを許可
defaultValuestring | string[]-初期展開するアイテム
orientation'vertical' | 'horizontal''vertical'キーボード操作（矢印キー）の方向
disabledbooleanfalseAccordion全体を無効化するか

AccordionItem

PropTypeDefaultDescription
value*string-アイテムの識別値
disabledbooleanfalseこのアイテムのみ無効化するか

Previous

z-indexトークン

Next

Alert

On this page