Accordion

A single expand/collapse unit with header (icon + title + optional description + optional trailing actions) and a body. Compose multiple together for a typical FAQ or settings group. Toggle Vue / CSS to switch the live demo and source together.

Basic

Single accordion with a label and body.

Vue SFC

Sizes

Small, medium and large.

Vue SFC

Colors

All built-in color variants.

Vue SFC

States

Default-open, default-closed and disabled.

Vue SFC

Icon & description

Leading icon plus a sub-text under the title.

Vue SFC

Group

Multiple stacked items with the optional group helper.

Vue SFC

Slots

Custom label, description, icon, actions and body via named slots.

Vue SFC

Event log

Live log of mno-toggle events.

Vue SFC

Customized

Override per-element styling with cssClass (Vue) or utility classes (CSS).

Vue SFC

CSS Variables

Vue SFC

Every accordion is themed through --mono-accordion-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-accordion> and the shadow build. The size and color props set presets, but an explicit --mono-accordion-* override always wins. To re-skin globally, set the underlying --theme-* tokens.

Variable	Default	Controls
--mono-accordion-accent	--theme-primary	Open border/head tint, arrow, focus ring (set by color)
--mono-accordion-text	--theme-text	Title / body text color
--mono-accordion-surface	--theme-surface	Header + body background
--mono-accordion-border	--theme-border	Outer + divider border color
--mono-accordion-background	--theme-background	Soft background base
--mono-accordion-radius	--theme-radius-sm	Corner radius (set by size)
--mono-accordion-pad-x	0.85rem	Header / body horizontal padding (set by size)
--mono-accordion-pad-y	0.55rem	Header / body vertical padding (set by size)
--mono-accordion-duration	0.28s	Open/close animation duration (body collapse + chevron); set 0s for an instant toggle

Performance

Vue SFC

An accordion body is always rendered — collapsing it is a visual state, not an unmount — so the consumer's content is never destroyed and never has to be rebuilt on reopen. When a body holds many components, that has two separate costs, and they have different fixes.

Putting a long list of accordions on screen. A collapsed body is skipped for layout and paint entirely (content-visibility: hidden), so closed panels cost almost nothing no matter what is inside them. Measured with ~320-node bodies, initial layout for 40 panels drops from 157 ms to 18 ms, and stops growing with the panel count. This is automatic.

Toggling one panel open or closed. This cost is dominated by the expand animation: grid-template-rows is a layout property, so the browser re-measures the body's whole subtree on every frame. For one open+close cycle with those same bodies, 24.8 ms animated vs 3.6 ms with the animation off. So if your bodies are heavy, turn it off:

mono-accordion.heavy { --mono-accordion-duration: 0s; }

That is the single most effective change for a sluggish toggle — roughly 85% of the cost is the animation, not the content.

Two consequences of a collapsed body being skipped, both intentional:

• Its contents are out of the tab order and the accessibility tree, so Tab no longer lands on invisible form fields inside a closed panel.
• Its contents are not matched by the browser's in-page find (Ctrl+F).

Browsers without transition-behavior: allow-discrete keep collapsed bodies in layout — the accordion behaves identically, just without the saving.

Types

Importimport { AccordionProps } from 'mono-helper'

Prop	Value	Default	Description
label	string	—	Title text shown in the accordion header.
description	string	—	Secondary description text shown under the title.
modelValue	boolean	—	Bound open state; true when the accordion is expanded.
disabled	boolean	—	Disables interaction and dims the accordion.
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Visual size of the accordion.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	—	Color theme of the accordion.
cssClass	AccordionCssClass	—	Per-element class overrides.