Data display

Accordion

A stack of native disclosures that open independently or one at a time, without JavaScript.

Class name	Type	Description
`accordionplf:accordion`	Component	Groups the items
`accordion-itemplf:accordion-item`	Part	A native details item
`accordion-triggerplf:accordion-trigger`	Part	The item's summary
`accordion-titleplf:accordion-title`	Part	The trigger's label
`accordion-iconplf:accordion-icon`	Part	An SVG icon before the title; an icon class there doesn't need it
`accordion-contentplf:accordion-content`	Part	The panel shown when open
`accordion-arrowplf:accordion-arrow`	Modifier	Ends each title with a chevron that turns over while open

Default

Keep links and form controls out of the summary, and add no roles or aria-expanded: the browser already exposes the state and handles the pointer, Enter and Space.

Item one

Content for item one.

Item two

Content for item two.

Item three

Content for item three.

<div class="accordion accordion-arrow">
  <details class="accordion-item" open>
    <summary class="accordion-trigger">
      <span class="accordion-title">Item one</span>
    </summary>
    <div class="accordion-content">Content for item one.</div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-trigger">
      <span class="accordion-title">Item two</span>
    </summary>
    <div class="accordion-content">Content for item two.</div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-trigger">
      <span class="accordion-title">Item three</span>
    </summary>
    <div class="accordion-content">Content for item three.</div>
  </details>
</div>

<div class="plf:accordion plf:accordion-arrow">
  <details class="plf:accordion-item" open>
    <summary class="plf:accordion-trigger">
      <span class="plf:accordion-title">Item one</span>
    </summary>
    <div class="plf:accordion-content">Content for item one.</div>
  </details>
  <details class="plf:accordion-item">
    <summary class="plf:accordion-trigger">
      <span class="plf:accordion-title">Item two</span>
    </summary>
    <div class="plf:accordion-content">Content for item two.</div>
  </details>
  <details class="plf:accordion-item">
    <summary class="plf:accordion-trigger">
      <span class="plf:accordion-title">Item three</span>
    </summary>
    <div class="plf:accordion-content">Content for item three.</div>
  </details>
</div>

import { Accordion, AccordionContent, AccordionItem, AccordionTitle, AccordionTrigger } from '@pelatform/react';

export function Example() {
  return (
    <Accordion arrow>
      <AccordionItem open>
        <AccordionTrigger>
          <AccordionTitle>Item one</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item one.</AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          <AccordionTitle>Item two</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item two.</AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          <AccordionTitle>Item three</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item three.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

import { Accordion, AccordionContent, AccordionItem, AccordionTitle, AccordionTrigger } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Accordion arrow>
      <AccordionItem open>
        <AccordionTrigger>
          <AccordionTitle>Item one</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item one.</AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          <AccordionTitle>Item two</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item two.</AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          <AccordionTitle>Item three</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item three.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

One item at a time

Give every item in a group the same name, unique to that group in the document.

Item one

Content for item one.

Item two

Content for item two.

Item three

Content for item three.

<div class="accordion accordion-arrow">
  <details class="accordion-item" name="accordion-single" open>
    <summary class="accordion-trigger">
      <span class="accordion-title">Item one</span>
    </summary>
    <div class="accordion-content">Content for item one.</div>
  </details>
  <details class="accordion-item" name="accordion-single">
    <summary class="accordion-trigger">
      <span class="accordion-title">Item two</span>
    </summary>
    <div class="accordion-content">Content for item two.</div>
  </details>
  <details class="accordion-item" name="accordion-single">
    <summary class="accordion-trigger">
      <span class="accordion-title">Item three</span>
    </summary>
    <div class="accordion-content">Content for item three.</div>
  </details>
</div>

<div class="plf:accordion plf:accordion-arrow">
  <details class="plf:accordion-item" name="accordion-single" open>
    <summary class="plf:accordion-trigger">
      <span class="plf:accordion-title">Item one</span>
    </summary>
    <div class="plf:accordion-content">Content for item one.</div>
  </details>
  <details class="plf:accordion-item" name="accordion-single">
    <summary class="plf:accordion-trigger">
      <span class="plf:accordion-title">Item two</span>
    </summary>
    <div class="plf:accordion-content">Content for item two.</div>
  </details>
  <details class="plf:accordion-item" name="accordion-single">
    <summary class="plf:accordion-trigger">
      <span class="plf:accordion-title">Item three</span>
    </summary>
    <div class="plf:accordion-content">Content for item three.</div>
  </details>
</div>

import { Accordion, AccordionContent, AccordionItem, AccordionTitle, AccordionTrigger } from '@pelatform/react';

export function Example() {
  return (
    <Accordion arrow>
      <AccordionItem name="accordion-single" open>
        <AccordionTrigger>
          <AccordionTitle>Item one</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item one.</AccordionContent>
      </AccordionItem>
      <AccordionItem name="accordion-single">
        <AccordionTrigger>
          <AccordionTitle>Item two</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item two.</AccordionContent>
      </AccordionItem>
      <AccordionItem name="accordion-single">
        <AccordionTrigger>
          <AccordionTitle>Item three</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item three.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

import { Accordion, AccordionContent, AccordionItem, AccordionTitle, AccordionTrigger } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Accordion arrow>
      <AccordionItem name="accordion-single" open>
        <AccordionTrigger>
          <AccordionTitle>Item one</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item one.</AccordionContent>
      </AccordionItem>
      <AccordionItem name="accordion-single">
        <AccordionTrigger>
          <AccordionTitle>Item two</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item two.</AccordionContent>
      </AccordionItem>
      <AccordionItem name="accordion-single">
        <AccordionTrigger>
          <AccordionTitle>Item three</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item three.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

With icons

Item one

Content for item one.

Item two

Content for item two.

<div class="accordion accordion-arrow">
  <details class="accordion-item">
    <summary class="accordion-trigger">
      <span class="icon icon-info-circle"></span>
      <span class="accordion-title">Item one</span>
    </summary>
    <div class="accordion-content">Content for item one.</div>
  </details>
  <details class="accordion-item">
    <summary class="accordion-trigger">
      <span class="icon icon-settings"></span>
      <span class="accordion-title">Item two</span>
    </summary>
    <div class="accordion-content">Content for item two.</div>
  </details>
</div>

<div class="plf:accordion plf:accordion-arrow">
  <details class="plf:accordion-item">
    <summary class="plf:accordion-trigger">
      <span class="plf:icon plf:icon-info-circle"></span>
      <span class="plf:accordion-title">Item one</span>
    </summary>
    <div class="plf:accordion-content">Content for item one.</div>
  </details>
  <details class="plf:accordion-item">
    <summary class="plf:accordion-trigger">
      <span class="plf:icon plf:icon-settings"></span>
      <span class="plf:accordion-title">Item two</span>
    </summary>
    <div class="plf:accordion-content">Content for item two.</div>
  </details>
</div>

import { Accordion, AccordionContent, AccordionItem, AccordionTitle, AccordionTrigger, Icon } from '@pelatform/react';

export function Example() {
  return (
    <Accordion arrow>
      <AccordionItem>
        <AccordionTrigger>
          <Icon name="info-circle" />
          <AccordionTitle>Item one</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item one.</AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          <Icon name="settings" />
          <AccordionTitle>Item two</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item two.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

import { Accordion, AccordionContent, AccordionItem, AccordionTitle, AccordionTrigger, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Accordion arrow>
      <AccordionItem>
        <AccordionTrigger>
          <Icon name="info-circle" />
          <AccordionTitle>Item one</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item one.</AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>
          <Icon name="settings" />
          <AccordionTitle>Item two</AccordionTitle>
        </AccordionTrigger>
        <AccordionContent>Content for item two.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

React

Accordion from @pelatform/react renders this markup with no script, and each part is a component of its own; an Icon in the trigger needs no class.

Prop	Values	Default
`arrow`	`true` ends each title with a chevron that turns over while open	`false`

The parts:

Part	Element
`AccordionItem`	A `details` with `accordion-item`, whose `open`, `onToggle` and `name` are its own
`AccordionTrigger`	A `summary` with `accordion-trigger`
`AccordionTitle`	A `span` with `accordion-title`
`AccordionContent`	A `div` with `accordion-content`

Other props are the element’s own, className and ref included.

CSS variables

Override on a root or on a single accordion.

Variable	Default
`--plf-accordion-bg`	Transparent
`--plf-accordion-color`	Text
`--plf-accordion-border`	Subtle border, between items
`--plf-accordion-hover-bg`	Muted surface, on the hovered trigger
`--plf-accordion-content-color`	Muted text
`--plf-accordion-padding-block`, `--plf-accordion-padding-inline`	Space 3 (12px), for the trigger and the content
`--plf-accordion-icon-size`	The control icon size (16px), for the icon and the chevron

#Default

#One item at a time

#With icons

#React

#CSS variables

Default

One item at a time

With icons

React

CSS variables