# Accordion

Source: https://lumeo.nativ.sh/components/accordion

# Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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.

Preview Code

Single (Default)

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it styled?

Yes. It comes with default styles that match the other components' aesthetic.

Is it animated?

Yes. It's animated by default, but you can disable it if you prefer.

Preview Code

FAQ

What payment methods do you accept?

We accept all major credit cards (Visa, Mastercard, Amex), PayPal, and bank transfers for enterprise plans.

Can I cancel my subscription at any time?

Yes, you can cancel your subscription at any time. Your access continues until the end of your billing period.

Do you offer a free trial?

We offer a 14-day free trial with no credit card required. Explore all Pro features before committing.

How do I get support?

Support is available via email, live chat, and our community Discord. Pro and Enterprise plans include priority support.

Preview Code

Multiple

What is Lumeo?

Lumeo is a Blazor component library inspired by shadcn/ui, built with Tailwind CSS.

Which .NET version?

Lumeo targets .NET 10 and uses Tailwind CSS v4 for styling.

Can I customize it?

Absolutely. All components accept a Class parameter for additional CSS classes.

Preview Code

Type — interactive

Pick a value to see it applied live. **Single** collapses the previously open item; **Multiple** lets any number remain open at once.

SingleMultiple

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it styled?

Yes. It comes with default styles that match the other components' aesthetic.

Is it animated?

Yes. It's animated by default, but you can disable it if you prefer.

## 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](/components/collapsible) — A simpler expand/collapse for a single section of content.
-   [Tabs](/components/tabs) — Use when content sections are mutually exclusive and always visible.
-   [Card](/components/card) — Use for non-collapsible grouped content with header and body sections.