Skip to content
FelicityUI

Accordion

A stacked set of headings that each reveal a section. Native disclosure on every platform; shared intent, tokens, and naming.

What does FelicityUI install?
Native source for the current platform. You own the files.
Is there a runtime package?
No. The CLI copies files into your app.

Installation

terminal
npx felicityui add accordion --platform react

Usage

example.tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

<Accordion defaultValue="install">
  <AccordionItem value="install">
    <AccordionTrigger>What does FelicityUI install?</AccordionTrigger>
    <AccordionContent>
      Native source for the current platform. You own the files.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Composition

Use the following composition to build a Accordion.

Accordion
├── AccordionItem
│   ├── AccordionTrigger
│   └── AccordionContent
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

Use Accordion for short answers under a heading. Do not use it for primary navigation, tabs, or a settings form that should stay visible.

When to use

  • FAQ or help copy.
  • Optional detail under a section title.
  • Several related answers where most stay collapsed.

When not to use

  • App navigation. Use the platform navigation pattern.
  • A card, tabs, or stepper as extra catalog items. Accordion items are already spaced cards.
  • Long documents. Use the platform's page or text view.
  • A Base UI / Radix accordion wrapper. The web item is native details.

Basic

One item open at a time. Native details/summary — the browser keeps exclusive groups in sync via name.

What does FelicityUI install?
Native source for the current platform. You own the files.
Is there a runtime package?
No. The CLI copies files into your app.

Multiple

Items open independently. Omit the shared details name (React multiple, exclusive false on native).

What does FelicityUI install?
Native source. You own the files.
Which platforms?
React, SwiftUI, and Jetpack Compose.
Is there a runtime package?
No. The CLI copies files into your app.

Disabled

disabled on an item keeps that heading from opening. Other items still work.

What does FelicityUI install?
Native source for the current platform.
Coming later
Not yet.

Surface

A heading plus Accordion. Do not invent a Card catalog item — compose layout around the spaced cards.

FAQ

What does FelicityUI install?
Native source. You own the files.
Is there a runtime package?
No. The CLI copies files into your app.

RTL

Pass dir=rtl on the React group. SwiftUI and Compose follow the system layout direction.

ماذا يثبت FelicityUI؟
مصدر أصلي للمنصة الحالية.
هل هناك حزمة وقت تشغيل؟
لا. تنسخ CLI الملفات إلى تطبيقك.

API Reference

Accordion

PropTypeDefaultDescription
multiplebooleanfalseAllow more than one item open. React multiple; SwiftUI/Compose exclusive = false.
defaultValue / defaultOpenstring | string[] / Set<String>—Initially open item ids. Exclusive keeps the first.
value / idstring—Item id. React value; SwiftUI/Compose id.
disabled / enabledbooleanfalse / truePrevents opening. React/SwiftUI use disabled; Compose uses enabled.
classNamestring—Additional classes.

Accessibility

WCAG 2.2 AA

  • Must be a real disclosure (details/summary, DisclosureGroup, or a button-headed region), not a clickable div.
  • The heading is the accessible name of the control.
  • Expanded and collapsed state is exposed to assistive tech.
  • Disabled items are not operable.
  • Touch target at least 24×24 CSS pixels and preferably 44×44 on touch platforms.

Platform notes

React

Renders native HTML details/summary. Exclusive groups use the details name attribute. No accordion library, no Base UI.

  • Server Component compatible. Opening and closing do not require client JavaScript.
  • Exclusive mode sets the same name on each details so the browser keeps one item open.
  • multiple leaves each details independent.
  • Open and close animate with ::details-content. Prefers-reduced-motion disables the height transition.
  • Disabled items are not focusable. Items are spaced muted cards. Do not invent a Card catalog item.

SwiftUI

SwiftUI DisclosureGroup. Exclusive coordination is a small observable board, not a web details clone.

  • Requires Xcode 15+ / iOS 17+. Add generated files to the Xcode target.
  • VoiceOver reads the heading. Hint carries Expanded, Collapsed, or Disabled.
  • Disable with the disabled argument (maps to .disabled(_:)).
  • Dynamic Type follows .body / .subheadline.

Compose

Column of headings with AnimatedVisibility. Material ripple on the heading; FelicityUI colors, not Material accordion roles.

  • TalkBack uses the heading as contentDescription and Expanded/Collapsed as stateDescription.
  • exclusive closes the other items when one opens.
  • enabled = false when disabled. Material 3 may keep a 48dp minimum touch target.