Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Accordion />
When to Use
- Build FAQ sections where users can expand answers to individual questions.
- Organize long content into collapsible sections to reduce visual clutter.
- Create settings panels where each category expands to reveal its options.
Pick a value to see it applied live. Single collapses the previously open item; Multiple lets any number remain open at once.
Keyboard Interactions
| Key | Action |
|---|---|
| Enter | Toggles the focused accordion item open or closed. |
| Space | Toggles the focused accordion item open or closed. |
| ArrowDown | Moves focus to the next accordion trigger. |
| ArrowUp | Moves focus to the previous accordion trigger. |
| Home | Moves focus to the first accordion trigger. |
| End | Moves focus to the last accordion trigger. |
API Reference
Accordion
AccordionItem
AccordionTrigger / AccordionContent
AccordionTrigger is the clickable button that toggles the item. AccordionContent is the collapsible content panel. Both read their state from the parent AccordionItem context.
Styling hooks (data-state)
Accordion items, triggers, and content expose a data-state
of open or
closed (plus
data-disabled on disabled items), so an
open section or its chevron can be animated purely from CSS — e.g.
data-[state=open]:rotate-180.
Related Components
- Collapsible — A simpler expand/collapse for a single section of content.
- Tabs — Use when content sections are mutually exclusive and always visible.
- Card — Use for non-collapsible grouped content with header and body sections.