Accordion
Vertically stacked panels that expand to reveal content, with one or several items open at a time and full keyboard navigation.
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" | — | Required. 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);
}