An Accordion lets you group content into collapsible sections. It improves legibility and saves space in an interface, while offering precise control over the display of information.
Content section 1
Content section 2
Content section 3
Examples of accordion
Base
The minimal example of an Accordion: a parent container with one or more children. Each item can be opened or closed independently (or not, depending on the configuration).
Content section 1
Content section 2
Content section 3
Icon
By default, an indicator icon (often an arrow or chevron) is displayed to indicate open/closed status. This icon can be customized via a snippet or hidden using the hideIcon prop.
Content section 1
Content section 2
Content section 3
Multiple
The Accordion can open several items at the same time.
In this mode, each item has its own independent state, ideal for presenting several blocks of information simultaneously.
Content section 1
Content section 2
Content section 3
Read Only
Some items can be made read-only with the readOnly prop. This disables interactions (click, open/close) while keeping the item visible in the chord structure.
Content section 1
Content section 2
Content section 3
Snippet
You can enrich or customize the rendering with predefined snippets, allowing you to add icons, dynamic content, action buttons in the header, etc.
Lapikit offers activator and indicator inputs.
Content section 1
Content section 2
Content section 3
Spacer
Prop spacer adds vertical spacing between chord items.
Useful for adding a little air to dense or visually busy interfaces.
Content section 1
Content section 2
Content section 3
API Reference
Root
props
type
description
default
type_extend
ref $bindable
HTMLElement
Direct access to DOM element
undefined
is
string
Defines the HTML tag used for the main wrapper (e.g. section, ul, etc.).
div
dark
boolean
Enable dark theme for component.
false
light
boolean
Enable light theme for the component.
false
color
string
Applies a custom color to text or icons.
undefined
background
string
Apply a custom background color.
undefined
spacer
boolean
Adds spacing between child elements.
false
hideIcon
boolean
Hides the indicator icon (arrow, chevron, etc.) for each item.
false
Item
property
type
description
default
type_extend
index required
number | string
Unique item identifier. Used to manage opening/closing.
undefined
ref $bindable
HTMLElement
Direct access to DOM element
undefined
is
string
Defines the item’s HTML tag.
div
open $bindable
boolean
Controls item opening status (bindable for external use).
false
dark
boolean
Enable dark theme for the item.
false
light
boolean
Enable light theme for the item.
false
text
string
Item title or static text
color
string
Applies a custom color to text or icons.
undefined
background
string
Apply a custom background color.
undefined
rounded
string
Controls item rounding (none, sm, md, lg, etc.).
md
readOnly
boolean
Prevents any user interaction with the item (click, toggle, etc.).
false
disabled
boolean
Disables item interaction and applies an associated visual style.
false
toggle
void
Callback function called when the item is toggled. Allows manual control of opening/closing.
undefined
(index: number | string) => void
indicator
Snippet
Snippet for customizing the visual indicator (arrow, chevron, etc.).
undefined
open[]
activator
Snippet
Snippet used to customize the trigger (clickable header).
undefined
Variables CSS
Root
variable
default
description
–-accordion-color
–-kit-on-container
Text color global
–-accordion-background
–-kit-container
Background color global
–-accordion-radius
–-kit-radius-md
Accordion edge radius global
Item
variable
default
description
–-on
–-accordion-color
Text color item
–-base
–-accordion-background
Background color item
–-shape
–-accordion-radius
Accordion edge radius item
To complete your Accordion interface, consider the Icon and Chip components for dynamic content.