Skip to main content
PROYECTOVIVIANA

Accordion

Accordion groups related sections of collapsible content. It is the styled Spectrum 2 wrapper over DisclosureGroup — each AccordionItem is a Disclosure composed from a header, title, and panel.

Import

import {
  Accordion,
  AccordionItem,
  AccordionItemHeader,
  AccordionItemTitle,
  AccordionItemPanel
} from '@proyecto-viviana/solid-spectrum';

Basic

A group of items where one panel starts open. Expanding an item collapses the others unless multiple expansion is allowed.

What the register sets out to do and where it applies.

<Accordion defaultExpandedKeys={["overview"]}>
  <AccordionItem id="overview">
    <AccordionItemHeader>
      <AccordionItemTitle>Overview</AccordionItemTitle>
    </AccordionItemHeader>
    <AccordionItemPanel>Register goals and scope.</AccordionItemPanel>
  </AccordionItem>
  {/* …more items */}
</Accordion>

Multiple expanded (controlled)

Set allowsMultipleExpanded to let several panels stay open at once, and drive the open set from state.

What the register sets out to do and where it applies.

Expanded: overview

<Accordion
  allowsMultipleExpanded
  expandedKeys={keys()}
  onExpandedChange={(k) => setKeys(new Set([...k].map(String)))}
>
  {/* AccordionItem list */}
</Accordion>

Accordion Props

Props

PropTypeDefaultDescription
allowsMultipleExpandedbooleanfalseWhether more than one item can be expanded at a time
expandedKeysSet<Key>—Keys of the currently expanded items (controlled)
defaultExpandedKeysSet<Key>—Keys of the initially expanded items (uncontrolled)
onExpandedChange(keys: Set<Key>) => void—Handler called when the expanded set changes
isDisabledbooleanfalseWhether every item in the accordion is disabled
childrenJSX.Element—AccordionItem elements

AccordionItem Props

Props

PropTypeDefaultDescription
idstring—Unique identifier for the item, used as its expansion key
isDisabledbooleanfalseWhether this item is disabled
childrenJSX.Element—AccordionItemHeader (with AccordionItemTitle) and AccordionItemPanel

Accessibility

  • Each item title renders a button carrying aria-expanded
  • The panel is associated with its trigger via aria-controls
  • Enter or Space toggles the focused item open and closed
  • Up and Down arrows move focus between item headers
  • Collapsed panels are removed from the accessibility tree
  • Disabled items are skipped in keyboard navigation and marked via ARIA