Accordion
Vertically stacked panels that expand to reveal content, with one or several items open at a time and full keyboard navigation.
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@plexui/vue/components/Accordion";Compose with AccordionItem, AccordionTrigger, and AccordionContent. Built on Reka UI Accordion, with the same keyboard navigation, focus management, and WAI-ARIA semantics as the React version.
Examples
Overview
Single
Multiple
Disabled
Card
API
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | Required. Whether one item or many can be open at a time | |
v-model:value / value | string | string[] | Controlled open item(s), named like the React prop | |
default-value | string | string[] | Uncontrolled initial open item(s) | |
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 |
class | string | Applied to the root <div> | |
@update:value | (value: string | string[]) => void | Fires when the open item(s) change; closing the open item of a single accordion reports "" |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | Required. Unique identifier used by value / default-value | |
disabled | boolean | false | Disable this item |
class | string | Applied to the item wrapper |
AccordionTrigger
Renders a <button> inside an <h3> header, with a chevron that rotates when the item opens. The default slot is the label; class, other attributes, and listeners such as @click go to the <button>.
AccordionContent
Renders the collapsible panel; the default slot is its content. It sets --radix-accordion-content-height (the same variable as React, so the shared CSS animates both) to interpolate the open/close animation from 0 to the measured content height. force-mount keeps a closed panel mounted and visible for custom animations.
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);
}