Skip to main content
The Accordion component provides a way to organize content in expandable/collapsible sections, useful for FAQs, navigation menus, and multi-step forms.

​
Basic usage

import { 
  FlxAccordion, 
  FlxAccordionItem, 
  FlxAccordionItemHeader,
  FlxAccordionItemTitle,
  FlxAccordionItemContent 
} from '@flowx/react-ui-toolkit';

function BasicAccordion() {
  return (
    <FlxAccordion>
      <FlxAccordionItem>
        <FlxAccordionItemHeader>
          <FlxAccordionItemTitle>
            Section 1
          </FlxAccordionItemTitle>
        </FlxAccordionItemHeader>
        <FlxAccordionItemContent>
          <p>Content for section 1 goes here.</p>
        </FlxAccordionItemContent>
      </FlxAccordionItem>

      <FlxAccordionItem>
        <FlxAccordionItemHeader>
          <FlxAccordionItemTitle>
            Section 2
          </FlxAccordionItemTitle>
        </FlxAccordionItemHeader>
        <FlxAccordionItemContent>
          <p>Content for section 2 goes here.</p>
        </FlxAccordionItemContent>
      </FlxAccordionItem>
    </FlxAccordion>
  );
}

​
With subtitles

Add subtitles to provide additional context for each accordion section: 
import { 
  FlxAccordion, 
  FlxAccordionItem, 
  FlxAccordionItemHeader,
  FlxAccordionItemTitle,
  FlxAccordionItemSubtitle,
  FlxAccordionItemContent 
} from '@flowx/react-ui-toolkit';

function AccordionWithSubtitle() {
  return (
    <FlxAccordion>
      <FlxAccordionItem>
        <FlxAccordionItemHeader>
          <FlxAccordionItemTitle>
            Account Settings
          </FlxAccordionItemTitle>
          <FlxAccordionItemSubtitle>
            Manage your account preferences
          </FlxAccordionItemSubtitle>
        </FlxAccordionItemHeader>
        <FlxAccordionItemContent>
          <p>Account settings content here.</p>
        </FlxAccordionItemContent>
      </FlxAccordionItem>
    </FlxAccordion>
  );
}

​
Controlled state

Control the open/closed state of accordion items: 
import { useState } from 'react';
import { FlxAccordion, FlxAccordionItem, FlxAccordionItemHeader, FlxAccordionItemTitle, FlxAccordionItemContent } from '@flowx/react-ui-toolkit';

function ControlledAccordion() {
  const [openItems, setOpenItems] = useState({ section1: false });

  const handleToggle = (key) => (isOpen) => {
    setOpenItems(prev => ({ ...prev, [key]: isOpen }));
  };

  return (
    <FlxAccordion>
      <FlxAccordionItem 
        open={openItems.section1}
        onOpenChange={handleToggle('section1')}
      >
        <FlxAccordionItemHeader>
          <FlxAccordionItemTitle>
            Controlled Section
          </FlxAccordionItemTitle>
        </FlxAccordionItemHeader>
        <FlxAccordionItemContent>
          <p>This section is controlled by state.</p>
        </FlxAccordionItemContent>
      </FlxAccordionItem>
    </FlxAccordion>
  );
}

​
Completion states

Mark accordion items as completed, useful for multi-step processes: 
import { FlxAccordion, FlxAccordionItem, FlxAccordionItemHeader, FlxAccordionItemTitle, FlxAccordionItemContent } from '@flowx/react-ui-toolkit';

function StepAccordion() {
  return (
    <FlxAccordion>
      <FlxAccordionItem completed>
        <FlxAccordionItemHeader>
          <FlxAccordionItemTitle>
            Step 1: Personal Information
          </FlxAccordionItemTitle>
        </FlxAccordionItemHeader>
        <FlxAccordionItemContent>
          <p>Personal information form (completed)</p>
        </FlxAccordionItemContent>
      </FlxAccordionItem>

      <FlxAccordionItem>
        <FlxAccordionItemHeader>
          <FlxAccordionItemTitle>
            Step 2: Contact Details
          </FlxAccordionItemTitle>
        </FlxAccordionItemHeader>
        <FlxAccordionItemContent>
          <p>Contact details form (in progress)</p>
        </FlxAccordionItemContent>
      </FlxAccordionItem>
    </FlxAccordion>
  );
}
When an accordion item is marked as completed, a checkmark icon will automatically appear next to the title.

​
Always opened

Create accordion items that cannot be collapsed: 
<FlxAccordionItem alwaysOpened defaultOpen>
  <FlxAccordionItemHeader>
    <FlxAccordionItemTitle>
      Important Information
    </FlxAccordionItemTitle>
  </FlxAccordionItemHeader>
  <FlxAccordionItemContent>
    <p>This content is always visible.</p>
  </FlxAccordionItemContent>
</FlxAccordionItem>

​
Props

​
FlxAccordionItem

​
open
boolean
Controls whether the accordion item is expanded. Use with onOpenChange for controlled behavior.
​
defaultOpen
boolean
Sets the initial open state for uncontrolled accordion items.
​
onOpenChange
(open: boolean) => void
Callback fired when the accordion item is toggled. Receives the new open state.
​
completed
boolean
default:"false"
Marks the accordion item as completed, displaying a checkmark icon.
​
alwaysOpened
boolean
default:"false"
When true, the accordion item cannot be collapsed and remains open.
​
disabled
boolean
default:"false"
Disables the accordion item, preventing user interaction.

​
FlxAccordionItemTitle

​
completedIcon
ElementType<FlxIconProps>
Custom icon component to display when the accordion item is marked as completed.
​
caretIcon
ElementType<FlxIconProps>
Custom icon component for the expand/collapse indicator.

​
FlxAccordionItemSubtitle

​
alwaysDisplay
boolean
default:"false"
When true, the subtitle remains visible even when the accordion item is collapsed.

​
TypeScript

The Accordion component is fully typed: 
import type { 
  FlxAccordionItemProps,
  FlxAccordionItemTitleProps 
} from '@flowx/react-ui-toolkit';

const accordionConfig: FlxAccordionItemProps = {
  completed: true,
  onOpenChange: (isOpen) => console.log(isOpen),
};

​
Accessibility

  • Uses proper ARIA attributes for collapsible content
  • Keyboard navigation with Enter/Space to toggle
  • Focus management for sequential navigation
  • Screen reader announcements for state changes
For better accessibility, always provide descriptive titles that clearly indicate the content within each accordion section.

Build docs developers (and LLMs) love

Get started for freeTalk to us