The <sp-accordion-item> element represents a single item in an <sp-accordion> parent element. Its label attribute and default slot content make up the "headline" and "body" of the toggleable content item.

yarn add @spectrum-web-components/accordion

Import the side effectful registration of <sp-accordion-item> via:

import '@spectrum-web-components/accordion/sp-accordion-item.js';

When looking to leverage the AccordionItem base class as a type and/or for extension purposes, do so via:

import { AccordionItem } from '@spectrum-web-components/accordion';

The accordion item consists of two key parts:

• A header button with a label and chevron icon
• Content that is revealed when the item is expanded

<sp-accordion>
    <sp-accordion-item label="Accordion Item">
        <div>Accordion item content can be toggled visible.</div>
    </sp-accordion-item>
</sp-accordion>

An accordion item can be opened by default using the open attribute:

<sp-accordion allow-multiple>
    <sp-accordion-item open label="Opened Accordion Item">
        <div>This accordion item content is visible by default.</div>
    </sp-accordion-item>
</sp-accordion>

Individual accordion items can be disabled using the disabled attribute. Disabled items cannot be expanded or collapsed:

<sp-accordion allow-multiple>
    <sp-accordion-item disabled label="Disabled Accordion Item">
        <div>You can not toggle this content visible.</div>
    </sp-accordion-item>
</sp-accordion>

The heading level for accordion items is controlled by the parent <sp-accordion> element's level attribute (2-6). This ensures all items within the same accordion use consistent semantic heading levels. See the accordion documentation for more details and examples.

An <sp-accordion-item> element will dispatch sp-accordion-item-toggle events when it is opened or closed. By default, these events are dispatched to allow the parent <sp-accordion> to manage which of its item children are expanded at any given time. Consumers can also listen for this event and check event.target.open to determine whether the item is currently expanded.

The accordion component provides proper ARIA attributes and keyboard navigation:

• Each accordion item header has aria-expanded to indicate its current state
• The header button has aria-controls pointing to the content region
• The content region has role="region" and aria-labelledby pointing to the header
• Disabled items have aria-disabled="true" applied
• The accordion supports keyboard navigation with Enter/Space for activation
• The heading level for all items is controlled by the parent accordion's level attribute (2-6) to maintain proper document structure and assistive technology navigation

Each accordion item should have a clear, descriptive label that indicates what content will be revealed when expanded.

Accordion content should be related to the header label and provide additional information or functionality that users can access when needed.

API