General

Accordion

A group of togglable entries

Loading playground

Overview

The Accordion component lets users expand and collapse sections of content, keeping the layout compact while letting them reach detail on demand. Drive the open panels from outside with v-model, or react to @select for analytics and persistence hooks.

Set type="single" for one panel open at a time, or type="multiple" to allow several. The v-model value is a string for single mode and an array for multiple.

Key Business & UX Benefits

Shorter pages mean shoppers reach pricing, shipping, and product details without scrolling past FAQs they did not want to read.
Reduces support tickets by letting customers self-serve answers to common questions directly on PDPs and help pages.
One component handles both single-open and multi-open patterns, so product detail tabs and FAQ lists share the same accessible behavior.
External v-model and @select make it easy to wire analytics on which sections shoppers actually open, feeding content decisions.

Pro-Tip from Larry: Use v-model to drive the active panel from outside, or react to @select for analytics.

Usage

LAccordion

<LAccordion v-model="open" type="single" variant="simple">
  <LAccordionItem value="hello" title="Hello, world!">
    Lorem Ipsum dolor
  </LAccordionItem>
  <LAccordionItem value="headline" title="This is a headline!">
    And this might be the greatest content ever!
  </LAccordionItem>
</LAccordion>

Feature List

Three variants ('simple', 'boxed-buttons', 'buttons') cover FAQ lists, PDP detail tabs, and chunky CTA stacks from one component
Type prop switches between 'single' (string v-model) and 'multiple' (string[] v-model) without changing markup
External v-model lets parent state drive open panels, useful for deep links and URL-synced sections
@select event fires the active value(s) so analytics can track which panels shoppers actually expand
AccordionItem accepts title plus default slot, keeping panel content composable with any markup
BEM root class (`accordion--{variant}`) gives per-instance theming hooks without prop sprawl

API Reference

LAccordion

Prop	Default	Type
`variant`	`simple`	`"simple" \| "boxed-buttons" \| "buttons"`
`type`	`single`	`"single" \| "multiple"`
`defaultValue`		`string`
`size`	`m`	`"s" \| "m"`
`value`		`string \| string[]`

Slot	Type
`default`	`any`

Event	Type
`select`	`(event: "select", value: string \| string[]): void`
`update:value`	`(event: "update:value", value: string \| string[] \| undefined): void`

LAccordionItem

Prop	Default	Type
`title`required		`string`
`icon`		`string`
`value`		`string`
`disabled`		`boolean`

Slot	Type
`default`	`any`
`headerText`	`any`

Edit this pageorReport an issue

UI Kit

The UI Kit is the core set of Laioutr UI primitives and foundational components used across packages, grouped into general, typography, layout, content, surfaces, form, and indicators.

Avatar

Avatar component for displaying user images, initials, or icons with size and color variants.