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
| Property | Type | Default | Description |
|---|---|---|---|
| Type | AccordionType | Single | Controls whether one or multiple items can be open at a time. Values: Single, Multiple. |
| DefaultValues | List<string>? | null | Initial list of open item values. |
AccordionItem
| Property | Type | Default | Description |
|---|---|---|---|
| Value | string | "" | Unique identifier for this accordion item. Used to track open/closed state. Required. |
| Disabled | bool | false | Disables this item so its trigger cannot toggle. |
AccordionTrigger / AccordionContent
| Property | Type | Default | Description |
|---|---|---|---|
| AccordionTrigger is the clickable button that toggles the item. AccordionContent is the collapsible content panel. Both read their state from the parent AccordionItem context. | |||
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.