Accordion

A vertically stacked set of collapsible panels for organizing content.

Basic Usage

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.
Is it animated?
▼
Yes. It has smooth open/close animations.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
DAccordion(
  items: [
    DAccordionItem(
      label: 'Is it accessible?',
      content: Component.text('Yes. It adheres to the WAI-ARIA design pattern.'),
    ),
    DAccordionItem(
      label: 'Is it styled?',
      content: Component.text('Yes. It comes with default styles.'),
    ),
    DAccordionItem(
      label: 'Is it animated?',
      content: Component.text('Yes. It has smooth animations.'),
    ),
  ],
)

With Default Open

Account Settings
▼
Manage your account settings and preferences.
Privacy
▼
Control your privacy settings and data sharing.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
DAccordion(
  defaultValue: 'item-0',
  items: [
    DAccordionItem(
      label: 'Account Settings',
      content: Component.text('Manage your account settings.'),
    ),
    DAccordionItem(
      label: 'Privacy',
      content: Component.text('Control your privacy settings.'),
    ),
  ],
)

Item With Value

Section One
▼
Content for section one (open by default via value).
Section Two
▼
Content for section two.
Section Three
▼
Content for section three.
dart
1
2
3
4
5
6
7
8
9
10
11
12
DAccordion(
  defaultValue: 'first',  // Opens item with this value
  items: [
    DAccordionItem(
      label: 'Section One',
      value: 'first',
      content: ...,
    ),
    DAccordionItem(label: 'Section Two', value: 'second', content: ...),
    DAccordionItem(label: 'Section Three', value: 'third', content: ...),
  ],
)

With Descriptions

Getting Started

Learn the basics

▼
Start with installation and basic setup.
Advanced Usage

Deep dive into features

▼
Explore advanced patterns and customization.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
DAccordion(
  items: [
    DAccordionItem(
      label: 'Getting Started',
      description: 'Learn the basics',
      content: Component.text('Start with installation...'),
    ),
    DAccordionItem(
      label: 'Advanced Usage',
      description: 'Deep dive into features',
      content: Component.text('Explore advanced patterns...'),
    ),
  ],
)

With Icons

Settings
▼
Configure your application settings.
Notifications
▼
Manage notification preferences.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
DAccordion(
  items: [
    DAccordionItem(
      label: 'Settings',
      icon: DIcon(name: DIconNames.settings, size: DIconSize.sm),
      content: Component.text('Configure your settings.'),
    ),
    DAccordionItem(
      label: 'Notifications',
      icon: DIcon(name: DIconNames.bell, size: DIconSize.sm),
      content: Component.text('Manage notifications.'),
    ),
  ],
)

Disabled Items

Available
▼
This item can be expanded.
Disabled
▼
This item cannot be expanded.
dart
1
2
3
4
5
6
7
8
9
10
11
12
13
DAccordion(
  items: [
    DAccordionItem(
      label: 'Available',
      content: Component.text('This item can be expanded.'),
    ),
    DAccordionItem(
      label: 'Disabled',
      disabled: true,
      content: Component.text('This item cannot be expanded.'),
    ),
  ],
)

Sizes

Small
Small Size
▼
Compact accordion item.
Medium (default)
Medium Size
▼
Default accordion item.
Large
Large Size
▼
Spacious accordion item.
dart
1
2
3
DAccordion(size: DSize.sm, items: [...])
DAccordion(size: DSize.md, items: [...])
DAccordion(size: DSize.lg, items: [...])

API Reference

DAccordion

Prop Type Default Description
items List<DAccordionItem> required List of accordion items
defaultValue String? null Initially open item by value
color DColor primary Color theme
variant DAccordionVariant soft Visual variant (soft, ghost)
size DSize md Size of the accordion

DAccordionItem

Prop Type Default Description
label String required Header text
content Component required Content to show when expanded
description String? null Optional description below label
icon Component? null Optional icon before label
disabled bool false Disable this item
value String? null Unique value (defaults to item-index)
defaultOpen bool false Whether this item is initially open