Live Docs

Navigation

Data Display /

stable

Accordion

Konten expandable vertikal untuk FAQ, detail section, atau pengelompokan info panjang.

import { Accordion, AccordionItem, AccordionTrigger, AccordionPanel } from "@naraya/ui";

Overview

Accordion cocok untuk daftar konten yang sebagian besar collapse. Pilih mode single atau multiple sesuai kebutuhan UX.

Examples

Single mode

Sistem komponen terpadu untuk ekosistem Naraya.

<Accordion type="single" defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>...</AccordionTrigger>
    <AccordionPanel>...</AccordionPanel>
  </AccordionItem>
</Accordion>

Multiple mode

Color, spacing, typography, shadow, motion.

Live docs dengan examples, props, tokens, dan a11y notes.

<Accordion type="multiple" defaultValue={["item-a", "item-c"]}>...</Accordion>

Props

PropTypeDefaultDescription
Accordion.type"single" | "multiple""single"Mode pembukaan panel.
Accordion.defaultValuestring | string[]—Panel yang terbuka saat initial render.
AccordionItem.value*string—Identifier unik per item.
AccordionTrigger.childrenReactNode—Label trigger item.
AccordionPanel.childrenReactNode—Konten panel expandable.

Tokens Used

--bg-surface

Item/panel background

--border-subtle

Divider antar item

--text-main

Trigger dan panel text

--color-primary

Focus/active accent

Accessibility

  • Trigger memakai button dengan aria-expanded sesuai state.
  • Panel memakai role='region' dan hidden saat tertutup.
  • Pastikan label trigger cukup jelas tanpa harus buka panel dulu.