Accordion
React accordion component with vertically stacked panels that expand to reveal content, supporting single or multiple open items and a card variant
import { Accordion } from "@plexui/ui/components/Accordion";Compose with Accordion.Item, Accordion.Trigger, and Accordion.Content. Built on Radix Accordion, so the primitive handles keyboard navigation, focus management, and WAI-ARIA semantics.
Examples
Overview
Single
Multiple
Disabled
Card
Subscription & billing
Common questions about plans, invoices, and cancellations.
API
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | — | Whether one item or many can be open at a time |
value | string | string[] | — | Controlled open item(s) |
defaultValue | string | string[] | — | Uncontrolled initial open item(s) |
onValueChange | (value) => void | — | Fires when the open item(s) change |
collapsible | boolean | false | When type="single", allow closing the open item |
disabled | boolean | false | Disable every item |
dir | "ltr" | "rtl" | "ltr" | Reading direction |
orientation | "horizontal" | "vertical" | "vertical" | Layout axis |
className | string | — | Applied to the root <div> |
Accordion.Item
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Required. Unique identifier used by value / defaultValue |
disabled | boolean | false | Disable this item |
className | string | — | Applied to the item wrapper |
Accordion.Trigger
Renders a <button> inside an <h3> header, with a chevron that rotates when the item opens. Accepts all native <button> props.
Accordion.Content
Renders the collapsible panel. Radix sets --radix-accordion-content-height so the open/close animation interpolates from 0 to the measured content height.
Styling
Colors, spacing, and transitions are controlled by component tokens:
--accordion-item-divider-color— border between items (defaults to--color-border)--accordion-item-divider-width— divider thickness (defaults to1px)--accordion-item-disabled-opacity— disabled item opacity (defaults to0.5)--accordion-trigger-color— trigger text color--accordion-trigger-font-size/--accordion-trigger-font-weight/--accordion-trigger-line-height— trigger typography--accordion-trigger-padding-block— trigger vertical padding--accordion-trigger-gap— space between label and chevron--accordion-trigger-focus-ring-color— focus ring color--accordion-icon-color/--accordion-icon-size— chevron color and size--accordion-content-color/--accordion-content-font-size/--accordion-content-line-height— content typography--accordion-content-padding-bottom— space between content text and the next divider--accordion-transition-duration/--accordion-transition-ease— open/close animation
Override at any scope to tune the look:
.my-faq {
--accordion-trigger-font-size: var(--font-text-base-size);
--accordion-item-divider-color: var(--color-border-strong);
}