Accordion

A vertically stacked set of interactive headings that reveal associated content sections when clicked. Each section can be expanded or collapsed independently.

API Reference

Preview

CLI

To generate and customize this style:


dart run forui style create accordion

Usage

`FAccordion(...)`


FAccordion(
  control: FAccordionControl.managed(
    controller: FAccordionController(min: 1, max: 2),
    onChange: (expanded) {},
  ),
  style: (style) => style.copyWith(...),
  children: [
    FAccordionItem(
      title: const Text('Is it accessible?'),
      child: const Text('Yes. It follows WAI-ARIA design patterns.'),
    ),
  ],
);

`FAccordionItem(...)`


FAccordionItem(
  title: const Text('Title'),
  child: const Text('Content'),
  style: FAccordionStyle(...),
  icon: const Icon(FIcons.chevronDown),
  initiallyExpanded: true,
  autofocus: false,
  focusNode: FocusNode(),
  onFocusChange: (focused) {},
  onHoverChange: (hovered) {},
  onStateChange: (states) {},
);

Accordion

Preview

Code

CLI

Usage

`FAccordion(...)`

`FAccordionItem(...)`

With Max Number of Expanded Items

Preview

Code