Accordion

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

Examples

Default

Is it accessible? Yes. It adheres to the WAI-ARIA design pattern with full keyboard navigation support. Is it styled? Yes. It comes with default styles that match the aesthetic of the design system. Is it animated? Yes. It's animated by default with smooth expand and collapse transitions.
View Code 
<c-accordion type="single" collapsible>
  <c-accordion-item value="item-1">
    <c-accordion-trigger>Is it accessible?</c-accordion-trigger>
    <c-accordion-content>
      Yes. It adheres to the WAI-ARIA design pattern with full keyboard
      navigation support.
    </c-accordion-content>
  </c-accordion-item>
  <c-accordion-item value="item-2">
    <c-accordion-trigger>Is it styled?</c-accordion-trigger>
    <c-accordion-content>
      Yes. It comes with default styles that match the aesthetic of the design
      system.
    </c-accordion-content>
  </c-accordion-item>
  <c-accordion-item value="item-3">
    <c-accordion-trigger>Is it animated?</c-accordion-trigger>
    <c-accordion-content>
      Yes. It's animated by default with smooth expand and collapse transitions.
    </c-accordion-content>
  </c-accordion-item>
</c-accordion>

Collapsible

Use the collapsible attribute to allow all items to be closed.

Can I close all items? Yes. Set the collapsible attribute on the accordion to allow closing all items. What happens without collapsible? Without collapsible, at least one item must remain open at all times.
View Code 
<c-accordion type="single" collapsible>
  <c-accordion-item value="item-1">
    <c-accordion-trigger>Can I close all items?</c-accordion-trigger>
    <c-accordion-content>
      Yes. Set the collapsible attribute on the accordion to allow closing all
      items.
    </c-accordion-content>
  </c-accordion-item>
  <c-accordion-item value="item-2">
    <c-accordion-trigger>What happens without collapsible?</c-accordion-trigger>
    <c-accordion-content>
      Without collapsible, at least one item must remain open at all times.
    </c-accordion-content>
  </c-accordion-item>
</c-accordion>

Multiple Open

Set type="multiple" to allow multiple items to be open at the same time.

Features
  • Full keyboard navigation
  • WAI-ARIA compliant
  • Smooth animations
 Customization Easily customize with Tailwind utility classes or custom CSS. Integration Works seamlessly with Lightning Web Components and standard web components.
View Code 
<c-accordion type="multiple">
  <c-accordion-item value="item-1">
    <c-accordion-trigger>Features</c-accordion-trigger>
    <c-accordion-content>
      <ul class="list-disc list-inside space-y-1">
        <li>Full keyboard navigation</li>
        <li>WAI-ARIA compliant</li>
        <li>Smooth animations</li>
      </ul>
    </c-accordion-content>
  </c-accordion-item>
  <c-accordion-item value="item-2">
    <c-accordion-trigger>Customization</c-accordion-trigger>
    <c-accordion-content>
      Easily customize with Tailwind utility classes or custom CSS.
    </c-accordion-content>
  </c-accordion-item>
  <c-accordion-item value="item-3">
    <c-accordion-trigger>Integration</c-accordion-trigger>
    <c-accordion-content>
      Works seamlessly with Lightning Web Components and standard web
      components.
    </c-accordion-content>
  </c-accordion-item>
</c-accordion>

Disabled Item

Disable individual accordion items using the disabled attribute.

Available Item This item is interactive and can be opened and closed. Disabled Item This content won't be visible because the item is disabled. Another Available Item This item is also interactive.
View Code 
<c-accordion type="single" collapsible>
  <c-accordion-item value="item-1">
    <c-accordion-trigger>Available Item</c-accordion-trigger>
    <c-accordion-content>
      This item is interactive and can be opened and closed.
    </c-accordion-content>
  </c-accordion-item>
  <c-accordion-item value="item-2" disabled>
    <c-accordion-trigger>Disabled Item</c-accordion-trigger>
    <c-accordion-content>
      This content won't be visible because the item is disabled.
    </c-accordion-content>
  </c-accordion-item>
  <c-accordion-item value="item-3">
    <c-accordion-trigger>Another Available Item</c-accordion-trigger>
    <c-accordion-content>
      This item is also interactive.
    </c-accordion-content>
  </c-accordion-item>
</c-accordion>

Keyboard Navigation

The accordion component supports full keyboard navigation:

  • Tab - Move focus to the next focusable element
  • Space or Enter - Toggle the focused accordion item
  • ArrowDown - Move focus to the next accordion trigger
  • ArrowUp - Move focus to the previous accordion trigger
  • Home - Move focus to the first accordion trigger
  • End - Move focus to the last accordion trigger

API Reference

Accordion

The root container component that manages accordion state and behavior.

Prop Type Default Description
type 'single' | 'multiple' 'single' Whether one or multiple items can be open
collapsible boolean false Allow all items to be closed (single type only)
value string | string[] - Controlled open state (string for single, array for multiple)
accordion-classes string - Additional CSS classes for the accordion container

Events:

  • valuechange - Emitted when the accordion value changes. Detail contains { value }.

AccordionItem

Individual accordion item that wraps the trigger and content.

Prop Type Default Description
value string auto-generated Unique identifier for the item
disabled boolean false Disable interaction with this item
accordion-item-classes string - Additional CSS classes for the item

AccordionTrigger

The clickable header that toggles the accordion item.

Prop Type Default Description
level number 3 Heading level for accessibility (1-6)
disabled boolean false Disable the trigger
accordion-trigger-classes string - Additional CSS classes for the trigger button

AccordionContent

The collapsible content section of an accordion item.

Prop Type Default Description
force-mount boolean false Keep content mounted in DOM even when closed
accordion-content-classes string - Additional CSS classes for the content inner wrapper

Accessibility

The accordion component follows the WAI-ARIA Accordion Pattern:

  • Uses proper ARIA attributes (aria-expanded, aria-controls, aria-labelledby)
  • Implements full keyboard navigation
  • Supports screen readers with proper role attributes
  • Maintains focus management during interactions
  • Uses semantic heading elements for triggers