Skip to main content

Accordion()

Accordion(__namedParameters): Element

Accordion - A collapsible content component with expandable sections

Provides an accessible accordion interface for organizing content into collapsible sections. Supports both compact and full variants with integrated controls for expanding/collapsing content areas.

Parameters​

__namedParameters​

AccordionProps

Returns​

Element

Examples​

// Basic accordion
<Accordion>
  <AccordionHeader>
    <AccordionTrigger>Section Title</AccordionTrigger>
  </AccordionHeader>
  <AccordionPanel>Content goes here</AccordionPanel>
</Accordion>
// Compact variant
<Accordion variant="compact">
  <AccordionHeader>
    <AccordionTrigger>Compact Section</AccordionTrigger>
  </AccordionHeader>
  <AccordionPanel>Compact content</AccordionPanel>
</Accordion>
// Multiple accordions in a group
<AccordionGroup>
  <Accordion>
    <AccordionHeader>
      <AccordionTrigger>First Section</AccordionTrigger>
    </AccordionHeader>
    <AccordionPanel>First content</AccordionPanel>
  </Accordion>
  <Accordion>
    <AccordionHeader>
      <AccordionTrigger>Second Section</AccordionTrigger>
    </AccordionHeader>
    <AccordionPanel>Second content</AccordionPanel>
  </Accordion>
</AccordionGroup>