BundyUI

Navigation

Accordion

A stack of collapsible panels, either one at a time or several open at once.

html
<UiAccordion :items="..." />

Items

required

items is the list, each entry a trigger label plus its panel content, with an optional icon, a disabled flag, or a slot name pointing at a template of your own.

Model value

modelValue is which panel is open — pass it, usually as v-model, to own that state yourself. It's a string under type='single' and an array under type='multiple'.

A Vue3/Nuxt4 component library styled entirely with UnoCSS, distributed as a Nuxt module.

Open: item-1

modelValue/defaultValue shape follows type — a single value for type="single", an array for type="multiple" — switching type at runtime doesn't convert an existing value between the two shapes for you.

Default value

defaultValue sets which item starts open when the accordion manages its own state. Items with no match stay closed.

Orders ship within 2 business days.

Type

type decides whether one panel is open at a time or several. multiple lets them stand open together and takes an array for its value, which is the right choice for a reference list people read out of order rather than in sequence.

A Vue3/Nuxt4 component library styled entirely with UnoCSS, distributed as a Nuxt module.

Yes — install the module and register the preset, no license required.

Collapsible

collapsible is what allows the last open panel to close. Setting it false keeps one item always open — reasonable when the panel area would otherwise collapse to nothing and the page would jump. It has no effect under type='multiple'.

Orders ship within 2 business days.

type="single" (default) keeps at most one item open; collapsible (default true) controls whether triggering the already-open item closes it, leaving none open, or is a no-op that always keeps exactly one open.

Variant

variant sets how much box each item carries. ghost has none at all, just a divider between items; subtle gives each its own card, soft a tint, and solid a filled surface.

ghost
subtle
soft
solid

variant="ghost" has no box at all, just a divider line between items; subtle (default)/soft/solid all use the same separate-card-with-gap layout, differing only in fill — subtle is ring-only (no fill), soft is a light bg-elevated/50 tint, solid is the full bg-elevated fill. Purely visual — none of them change type/collapsible behavior.

Disabled item

An item can opt out on its own, without disabling the whole accordion.

Custom panel content

Give an item a slot name and render that slot to put markup — not just text — inside its panel.

Panel content comes from item.content (plain text) by default; use item.slot plus a matching named slot for anything richer, the same pattern Tabs uses.

Panels mount/unmount on open/close (not just hidden via CSS) — don't rely on a closed panel's inputs/state persisting.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
itemsrequired
AccordionItem[]
—
The items to render, each with a trigger label and panel content.
modelValue
string | number | (string | number)[]
—
The open item's value (`type="single"`) or open items' values (`type="multiple"`). Pass this to fully control which items are open yourself.
defaultValue
string | number | (string | number)[]
—
The initially open item(s) when uncontrolled.
type
"single" | "multiple"
'single'
Whether more than one item can be open at once.
collapsible
boolean
true
In `type="single"`, allows closing the open item by triggering it again, leaving none open. Has no effect in `type="multiple"`, where every item can already be toggled independently.
variant
"ghost" | "subtle" | "soft" | "solid"
'subtle'
`ghost` has no box at all, just a divider line between items. `subtle` renders each item as its own separate ringed card with a gap between them. `soft` is the same layout as `subtle` but filled with a light tint instead of outlined. `solid` is the same layout again, filled more strongly.

Slots

Slot
item.slot ?? 'content'

Emits

Event
Payload
Description
update:modelValue
[value: string | number | (string | number)[] | undefined]
—

Types

ts
interface AccordionItem {
    /**
     * The trigger's label text.
     */
    label: string;

    /**
     * Name of the icon displayed before the label.
     */
    icon?: string;

    /**
     * Plain-text panel content. Ignored if a `#<slot>` (or the default `#content`) slot is used.
     */
    content?: string;

    /**
     * Unique value identifying this item. Falls back to its index, so set this explicitly if items
     * can be reordered/filtered.
     */
    value?: string | number;

    /**
     * Disables this item, preventing it from being opened/closed.
     * @defaultValue false
     */
    disabled?: boolean;

    /**
     * Name of the slot rendering this item's panel content, instead of the default `#content` slot.
     */
    slot?: string;
}