Accordion component
Accordion
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.
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).
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.
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.
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.
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.
Spacer
Prop spacer adds vertical spacing between chord items.
Useful for adding a little air to dense or visually busy interfaces.
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-label-primary | Text color global |
–-accordion-background | --kit-background-grouped-primary | Background color global |
--accordion-shape | --system-shape-md | Accordion edge radius global |
Item
| variable | default | description |
|---|
--accordion--item-shape | –-accordion-color | Text color item |
--accordion--item-background | –-accordion-background | Background color item |
--accordion--item-shape | –-accordion-radius | Accordion edge radius item |
To complete your Accordion interface, consider the Icon and Chip components for dynamic content.
