Neumorphism UI

Accordion

関連する項目を一覧し、必要な詳細だけを開く場合に使います。独立した領域が一つなら Collapsible が適しています。

プレビュー

コンポーネント設定の質問

トークン、ソース編集、キーボード操作の 3 項目を展開します。トークンの回答が最初から開いています。

最初に共通スタイルを一度導入してください。ニューモーフィズムの surface、shadow、radius トークンがプロジェクトの CSS に接続され、各コンポーネントで使われます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/accordion

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

各 AccordionItem に AccordionTrigger と AccordionContent を置き、固有の value を指定します。複数の回答を開いたままにする場合は multiple を設定します。

"use client";

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

export default function Example() {
  return (
    <Accordion>
      <AccordionItem value="shipping">
        <AccordionTrigger>When will my order arrive?</AccordionTrigger>
        <AccordionContent>Orders ship in 2–3 business days.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

API リファレンス

Base UI Accordion の状態管理とアクセシビリティ上の関連付けを維持しながら、展開中の項目を inset サーフェスとして表示します。multiple モードに加え、制御・非制御の両方の使い方に対応します。

コンポーネントプロパティ型デフォルト説明
Accordionmultiplebooleanfalse複数の項目を同時に展開できるようにします。
Accordionvalue / defaultValuestring[]—展開中の項目を表す制御値、または非制御時の初期値です。
AccordiononValueChange(value) => void—展開中の項目が変わったときに呼び出されます。
AccordionItemvalue必須string—項目を識別する一意の値です。
AccordionItemdisabledbooleanfalse項目の trigger を無効にします。
AccordionContentkeepMountedbooleanfalse閉じている間も panel を DOM に保持します。

アクセシビリティ

  • 01

    Base UI が各 trigger と panel の aria-expanded および aria-controls の関連付けを管理します。

  • 02

    Tab で trigger にフォーカスを移し、Enter または Space で項目を開閉します。

  • 03

    AccordionTrigger は実際の button をレンダリングするため、その見出し内に別の button を配置しないでください。