Accordion

The Accordion component is a structured set of collapsible items built with the same shared colour, sizing, and disclosure rules as the platform details component. Use it when you want related sections to coordinate as a group, either allowing one panel at a time or multiple open panels.

By default, accordion items are visually connected into a single stacked control. If you want separated items instead, use disconnected or compose multiple LxDetails components directly.

• Settings
  • LxAccordion
  • LxAccordionItem
• Events
  • LxAccordionItem
• Usage
• Single Or Multiple
• Connected Or Separate
• Variants
• Sizes
• Controlled Open State
• Slots
  • Slot: summary
  • Slot: content
  • Slot: default

Settings

LxAccordion

Prop	Type	Default	Description
multiple	boolean	false	Whether multiple accordion items can stay open at the same time.
disconnected	boolean	false	Whether accordion items should render as separated panels instead of a connected stack.
variant	TColours | TSurfaceColours	raised	The default summary surface for child items.
size	TSizes	md	The default control size for child items.
gap	TSizes	md	The vertical gap between accordion items when disconnected is true.
contentPadding	TSizes	size	The default content padding for child items.
contentLineHeight	TFontLineHeights	normal	The default line-height token for child item content.
contentBackgroundColour	TSurfaceColours | transparent	raised, or transparent when variant="transparent"	The default content surface for child items.
borderRadius	TRadiusSize	md	The default outer border radius for child items.
borderWidth	TBorderWidths	thin	The default border width for child items.

LxAccordionItem

Prop	Type	Default	Description
title	string?	undefined	Optional summary title text displayed before any summary slot content.
icon	string?	undefined	Optional summary icon displayed before the title.
content	string	''	Optional plain text content used when no content or default slot is provided.
variant	TColours | TSurfaceColours	inherits from LxAccordion	Overrides the summary surface for this item.
size	TSizes	inherits from LxAccordion	Overrides the shared control size for this item.
contentPadding	TSizes	inherits from LxAccordion, then size	Overrides the content padding for this item.
contentLineHeight	TFontLineHeights	inherits from LxAccordion	Overrides the line-height token for this item content.
contentBackgroundColour	TSurfaceColours | transparent	inherits from LxAccordion	Overrides the content surface for this item.
borderRadius	TRadiusSize	inherits from LxAccordion	Overrides the outer border radius for this item.
borderWidth	TBorderWidths	inherits from LxAccordion	Overrides the border width for this item.
disabled	boolean	false	Prevents the item from being toggled and applies a disabled visual state.
value	string?	generated	Optional stable identifier used internally by the accordion group.

Events

LxAccordionItem

Event	Description
update:open	Emitted when the item disclosure state changes, for use with v-model:open.

Usage

BillingUpdated 2 hours ago

Review invoices, payment status, and settlement details.

Shipping

Track dispatch state and estimated delivery windows.

Support

Escalations, ownership, and customer conversation history.

Show code

<LxAccordion>
	<LxAccordionItem title="Billing" icon="receipt">
		<template #summary>
			<span>Updated 2 hours ago</span>
		</template>
		<template #content>
			<p>Review invoices, payment status, and settlement details.</p>
		</template>
	</LxAccordionItem>
	<LxAccordionItem title="Shipping" icon="truck-fast">
		<template #content>
			<p>Track dispatch state and estimated delivery windows.</p>
		</template>
	</LxAccordionItem>
	<LxAccordionItem title="Support" icon="life-ring">
		<template #content>
			<p>Escalations, ownership, and customer conversation history.</p>
		</template>
	</LxAccordionItem>
</LxAccordion>

Single Or Multiple

By default, an accordion behaves as a single-open group. Set multiple to allow several items to stay open together.

Single-open item 1

Opening one item closes the others in this group.

Single-open item 2

This follows classic accordion behaviour.

Multi-open item 1

Multiple sections can stay expanded here.

Multi-open item 2

This is useful for FAQs and grouped references.

Show code

<LxAccordion>
	<LxAccordionItem title="Single-open item 1" icon="list">
		<template #content>
			<p>Opening one item closes the others in this group.</p>
		</template>
	</LxAccordionItem>
	<LxAccordionItem title="Single-open item 2" icon="list-check">
		<template #content>
			<p>This follows classic accordion behaviour.</p>
		</template>
	</LxAccordionItem>
</LxAccordion>

<LxAccordion multiple>
	<LxAccordionItem title="Multi-open item 1" icon="layer-group">
		<template #content>
			<p>Multiple sections can stay expanded here.</p>
		</template>
	</LxAccordionItem>
	<LxAccordionItem title="Multi-open item 2" icon="boxes-stacked">
		<template #content>
			<p>This is useful for FAQs and grouped references.</p>
		</template>
	</LxAccordionItem>
</LxAccordion>

Connected Or Separate

Accordions are connected by default so the group reads as one control. Set the disconnected prop when you explicitly want separated cards instead.

Connected item 1

This is the default accordion presentation.

Connected item 2

The items share one outer silhouette.

Separate item 1

This behaves more like a curated stack of details panels.

Separate item 2

Use this when the grouped shell is not desired.

Show code

<LxAccordion>
	<LxAccordionItem title="Connected item 1" icon="grip-lines">
		<template #content>
			<p>This is the default accordion presentation.</p>
		</template>
	</LxAccordionItem>
	<LxAccordionItem title="Connected item 2" icon="grip-lines">
		<template #content>
			<p>The items share one outer silhouette.</p>
		</template>
	</LxAccordionItem>
</LxAccordion>

<LxAccordion disconnected gap="md">
	<LxAccordionItem title="Separate item 1" icon="square">
		<template #content>
			<p>This behaves more like a curated stack of details panels.</p>
		</template>
	</LxAccordionItem>
	<LxAccordionItem title="Separate item 2" icon="square">
		<template #content>
			<p>Use this when the grouped shell is not desired.</p>
		</template>
	</LxAccordionItem>
</LxAccordion>

Variants

The accordion supports both semantic colours and semantic surfaces, with item-level overrides when needed.

primary accordion

Uses primary as the summary surface.

secondary accordion

Uses secondary as the summary surface.

accent accordion

Uses accent as the summary surface.

info accordion

Uses info as the summary surface.

success accordion

Uses success as the summary surface.

warning accordion

Uses warning as the summary surface.

danger accordion

Uses danger as the summary surface.

white accordion

Uses white as the summary surface.

black accordion

Uses black as the summary surface.

transparent accordion

Uses transparent as the summary surface.

base accordion

Uses the base surface token.

raised accordion

Uses the raised surface token.

sunken accordion

Uses the sunken surface token.

overlay accordion

Uses the overlay surface token.

border accordion

Uses the border surface token.

Show code

<LxAccordion variant="primary">
	<LxAccordionItem title="Primary accordion" icon="palette">
		<template #content>
			<p>Uses <code>primary</code> as the summary surface.</p>
		</template>
	</LxAccordionItem>
</LxAccordion>

<LxAccordion variant="raised">
	<LxAccordionItem title="Raised accordion" icon="layer-group">
		<template #content>
			<p>Uses the <code>raised</code> surface token.</p>
		</template>
	</LxAccordionItem>
</LxAccordion>

Sizes

2xs accordion

This item follows the shared 2xs control scale.

xs accordion

This item follows the shared xs control scale.

sm accordion

This item follows the shared sm control scale.

md accordion

This item follows the shared md control scale.

lg accordion

This item follows the shared lg control scale.

xl accordion

This item follows the shared xl control scale.

2xl accordion

This item follows the shared 2xl control scale.

3xl accordion

This item follows the shared 3xl control scale.

Show code

<LxFlex direction="column" gap="md">
	<LxAccordion v-for="size in SIZES" :key="size" :size="size">
		<LxAccordionItem :title="`${size} accordion`" icon="ruler-combined">
			<template #content>
				<p>This item follows the shared <code>{{ size }}</code> control scale.</p>
			</template>
		</LxAccordionItem>
	</LxAccordion>
</LxFlex>

Controlled Open State

Each item supports v-model:open, which works alongside the parent accordion coordination rules.

Initially open item

This item starts expanded.

Show code

<LxAccordion>
	<LxAccordionItem v-model:open="controlledOpen" title="Initially open item" icon="toggle-on">
		<template #content>
			<p>This item starts expanded.</p>
		</template>
	</LxAccordionItem>
</LxAccordion>

Slots

Slot: summary

Adds extra inline content to the summary row after the icon and title, and before the chevrons.

Slot: content

Provides named content for the expanded panel. This takes priority over the default slot and the content prop.

Slot: default

Provides fallback expanded content when the named content slot is not used.