The Accordion component allows users to toggle the visibility of content sections. It’s often used for FAQs, settings panels, or anywhere information needs to be organized concisely. Individual accordion items (<plus-accordion>) should typically be wrapped in an <plus-accordion-group> for proper styling and behavior, especially when multiple items are present.

Anatomy

Usage

Basic Example

A single accordion item consists of a header and a panel. Clicking the header toggles the panel’s visibility.

Accordion Title

Accordion Content

Show code

React

import { PlusAccordion } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusAccordion>
        <div slot="header">
          Accordion Title
        </div>
        <div slot="panel">
          Accordion Content
        </div>
      </PlusAccordion>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-accordion>
      <div slot="header">
        Accordion Title
      </div>
      <div slot="panel">
        Accordion Content
      </div>
    </plus-accordion>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-accordion>
    <div slot="header">
      Accordion Title
    </div>
    <div slot="panel">
      Accordion Content
    </div>
  </plus-accordion>
</template>

Svelte

<plus-accordion>
  <div slot="header">
    Accordion Title
  </div>
  <div slot="panel">
    Accordion Content
  </div>
</plus-accordion>

HTML

<plus-accordion>
  <div slot="header">
    Accordion Title
  </div>
  <div slot="panel">
    Accordion Content
  </div>
</plus-accordion>

Grouping Accordions

Wrap multiple <plus-accordion> elements in <plus-accordion-group> for proper styling and interaction. By default, only one accordion within a group can be open at a time.

First Item

Content for the first item.

Second Item

Content for the second item.

Third Item

Content for the third item.

Show code

React

import { PlusAccordionGroup, PlusAccordion } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusAccordionGroup>
        <PlusAccordion>
          <div slot="header">
            First Item
          </div>
          <div slot="panel">
            Content for the first item.
          </div>
        </PlusAccordion>
        <PlusAccordion>
          <div slot="header">
            Second Item
          </div>
          <div slot="panel">
            Content for the second item.
          </div>
        </PlusAccordion>
        <PlusAccordion>
          <div slot="header">
            Third Item
          </div>
          <div slot="panel">
            Content for the third item.
          </div>
        </PlusAccordion>
      </PlusAccordionGroup>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-accordion-group>
      <plus-accordion>
        <div slot="header">
          First Item
        </div>
        <div slot="panel">
          Content for the first item.
        </div>
      </plus-accordion>
      <plus-accordion>
        <div slot="header">
          Second Item
        </div>
        <div slot="panel">
          Content for the second item.
        </div>
      </plus-accordion>
      <plus-accordion>
        <div slot="header">
          Third Item
        </div>
        <div slot="panel">
          Content for the third item.
        </div>
      </plus-accordion>
    </plus-accordion-group>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-accordion-group>
    <plus-accordion>
      <div slot="header">
        First Item
      </div>
      <div slot="panel">
        Content for the first item.
      </div>
    </plus-accordion>
    <plus-accordion>
      <div slot="header">
        Second Item
      </div>
      <div slot="panel">
        Content for the second item.
      </div>
    </plus-accordion>
    <plus-accordion>
      <div slot="header">
        Third Item
      </div>
      <div slot="panel">
        Content for the third item.
      </div>
    </plus-accordion>
  </plus-accordion-group>
</template>

Svelte

<plus-accordion-group>
  <plus-accordion>
    <div slot="header">
      First Item
    </div>
    <div slot="panel">
      Content for the first item.
    </div>
  </plus-accordion>
  <plus-accordion>
    <div slot="header">
      Second Item
    </div>
    <div slot="panel">
      Content for the second item.
    </div>
  </plus-accordion>
  <plus-accordion>
    <div slot="header">
      Third Item
    </div>
    <div slot="panel">
      Content for the third item.
    </div>
  </plus-accordion>
</plus-accordion-group>

HTML

<plus-accordion-group>
  <plus-accordion>
    <div slot="header">
      First Item
    </div>
    <div slot="panel">
      Content for the first item.
    </div>
  </plus-accordion>
  <plus-accordion>
    <div slot="header">
      Second Item
    </div>
    <div slot="panel">
      Content for the second item.
    </div>
  </plus-accordion>
  <plus-accordion>
    <div slot="header">
      Third Item
    </div>
    <div slot="panel">
      Content for the third item.
    </div>
  </plus-accordion>
</plus-accordion-group>

Multiple Open Items

Set the multi attribute on <plus-accordion-group> to allow multiple accordion items within the group to be open simultaneously.

Initially Open Item

This item starts expanded because of the open attribute.

Another Item

This can be opened independently.

Show code

React

import { PlusAccordionGroup, PlusAccordion } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusAccordionGroup multi="true">
        <PlusAccordion open>
          <div slot="header">
            Initially Open Item
          </div>
          <div slot="panel">
            This item starts expanded because of the
            <code dir="auto">
              open
            </code>
            attribute.
          </div>
        </PlusAccordion>
        <PlusAccordion>
          <div slot="header">
            Another Item
          </div>
          <div slot="panel">
            This can be opened independently.
          </div>
        </PlusAccordion>
      </PlusAccordionGroup>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-accordion-group multi="true">
      <plus-accordion open>
        <div slot="header">
          Initially Open Item
        </div>
        <div slot="panel">
          This item starts expanded because of the
          <code dir="auto">
            open
          </code>
          attribute.
        </div>
      </plus-accordion>
      <plus-accordion>
        <div slot="header">
          Another Item
        </div>
        <div slot="panel">
          This can be opened independently.
        </div>
      </plus-accordion>
    </plus-accordion-group>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-accordion-group multi="true">
    <plus-accordion open>
      <div slot="header">
        Initially Open Item
      </div>
      <div slot="panel">
        This item starts expanded because of the
        <code dir="auto">
          open
        </code>
        attribute.
      </div>
    </plus-accordion>
    <plus-accordion>
      <div slot="header">
        Another Item
      </div>
      <div slot="panel">
        This can be opened independently.
      </div>
    </plus-accordion>
  </plus-accordion-group>
</template>

Svelte

<plus-accordion-group multi="true">
  <plus-accordion open>
    <div slot="header">
      Initially Open Item
    </div>
    <div slot="panel">
      This item starts expanded because of the
      <code dir="auto">
        open
      </code>
      attribute.
    </div>
  </plus-accordion>
  <plus-accordion>
    <div slot="header">
      Another Item
    </div>
    <div slot="panel">
      This can be opened independently.
    </div>
  </plus-accordion>
</plus-accordion-group>

HTML

<plus-accordion-group multi="true">
  <plus-accordion open>
    <div slot="header">
      Initially Open Item
    </div>
    <div slot="panel">
      This item starts expanded because of the
      <code dir="auto">
        open
      </code>
      attribute.
    </div>
  </plus-accordion>
  <plus-accordion>
    <div slot="header">
      Another Item
    </div>
    <div slot="panel">
      This can be opened independently.
    </div>
  </plus-accordion>
</plus-accordion-group>

Size

Use the size attribute on <plus-accordion-group> (or individual <plus-accordion> if not grouped) to control the overall size.

Accordion Item

Accordion content with different sizes.

Accordion Item

Accordion content with different sizes.

Accordion Item

Accordion content with different sizes.

Show code

React

import { PlusAccordionGroup, PlusAccordion } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusAccordionGroup size="sm">
        <PlusAccordion>
          <div slot="header">
            Accordion Item
          </div>
          <div slot="panel">
            Accordion content with different sizes.
          </div>
        </PlusAccordion>
      </PlusAccordionGroup>
      <PlusAccordionGroup size="md">
        <PlusAccordion>
          <div slot="header">
            Accordion Item
          </div>
          <div slot="panel">
            Accordion content with different sizes.
          </div>
        </PlusAccordion>
      </PlusAccordionGroup>
      <PlusAccordionGroup size="lg">
        <PlusAccordion>
          <div slot="header">
            Accordion Item
          </div>
          <div slot="panel">
            Accordion content with different sizes.
          </div>
        </PlusAccordion>
      </PlusAccordionGroup>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-accordion-group size="sm">
      <plus-accordion>
        <div slot="header">
          Accordion Item
        </div>
        <div slot="panel">
          Accordion content with different sizes.
        </div>
      </plus-accordion>
    </plus-accordion-group>
    <plus-accordion-group size="md">
      <plus-accordion>
        <div slot="header">
          Accordion Item
        </div>
        <div slot="panel">
          Accordion content with different sizes.
        </div>
      </plus-accordion>
    </plus-accordion-group>
    <plus-accordion-group size="lg">
      <plus-accordion>
        <div slot="header">
          Accordion Item
        </div>
        <div slot="panel">
          Accordion content with different sizes.
        </div>
      </plus-accordion>
    </plus-accordion-group>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-accordion-group size="sm">
    <plus-accordion>
      <div slot="header">
        Accordion Item
      </div>
      <div slot="panel">
        Accordion content with different sizes.
      </div>
    </plus-accordion>
  </plus-accordion-group>
  <plus-accordion-group size="md">
    <plus-accordion>
      <div slot="header">
        Accordion Item
      </div>
      <div slot="panel">
        Accordion content with different sizes.
      </div>
    </plus-accordion>
  </plus-accordion-group>
  <plus-accordion-group size="lg">
    <plus-accordion>
      <div slot="header">
        Accordion Item
      </div>
      <div slot="panel">
        Accordion content with different sizes.
      </div>
    </plus-accordion>
  </plus-accordion-group>
</template>

Svelte

<plus-accordion-group size="sm">
  <plus-accordion>
    <div slot="header">
      Accordion Item
    </div>
    <div slot="panel">
      Accordion content with different sizes.
    </div>
  </plus-accordion>
</plus-accordion-group>
<plus-accordion-group size="md">
  <plus-accordion>
    <div slot="header">
      Accordion Item
    </div>
    <div slot="panel">
      Accordion content with different sizes.
    </div>
  </plus-accordion>
</plus-accordion-group>
<plus-accordion-group size="lg">
  <plus-accordion>
    <div slot="header">
      Accordion Item
    </div>
    <div slot="panel">
      Accordion content with different sizes.
    </div>
  </plus-accordion>
</plus-accordion-group>

HTML

<plus-accordion-group size="sm">
  <plus-accordion>
    <div slot="header">
      Accordion Item
    </div>
    <div slot="panel">
      Accordion content with different sizes.
    </div>
  </plus-accordion>
</plus-accordion-group>
<plus-accordion-group size="md">
  <plus-accordion>
    <div slot="header">
      Accordion Item
    </div>
    <div slot="panel">
      Accordion content with different sizes.
    </div>
  </plus-accordion>
</plus-accordion-group>
<plus-accordion-group size="lg">
  <plus-accordion>
    <div slot="header">
      Accordion Item
    </div>
    <div slot="panel">
      Accordion content with different sizes.
    </div>
  </plus-accordion>
</plus-accordion-group>

Disabled

Set the disabled attribute on <plus-accordion> to prevent it from being opened or closed.

Disabled Item

This content cannot be shown via UI interaction.

Show code

React

import { PlusAccordion } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusAccordion disabled>
        <div slot="header">
          Disabled Item
        </div>
        <div slot="panel">
          This content cannot be shown via UI interaction.
        </div>
      </PlusAccordion>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-accordion disabled>
      <div slot="header">
        Disabled Item
      </div>
      <div slot="panel">
        This content cannot be shown via UI interaction.
      </div>
    </plus-accordion>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-accordion disabled>
    <div slot="header">
      Disabled Item
    </div>
    <div slot="panel">
      This content cannot be shown via UI interaction.
    </div>
  </plus-accordion>
</template>

Svelte

<plus-accordion disabled>
  <div slot="header">
    Disabled Item
  </div>
  <div slot="panel">
    This content cannot be shown via UI interaction.
  </div>
</plus-accordion>

HTML

<plus-accordion disabled>
  <div slot="header">
    Disabled Item
  </div>
  <div slot="panel">
    This content cannot be shown via UI interaction.
  </div>
</plus-accordion>

Visual Sections

Layout & Spacing

Light & Dark Mode

Accessibility (a11y)

• Keyboard Behavior:
  • When the accordion header has focus, Enter or Space toggles the accordion’s expansion state.
  • Accordion headers are included in the standard tab sequence.
  • Disabled accordions are skipped in the tab sequence.
• Screen Reader:
  • The component uses role="button" for the header and role="region" for the panel.
  • aria-expanded indicates the state (true/false) of the accordion panel.
  • aria-controls links the header button to the panel it controls.
  • aria-disabled="true" is set on disabled accordion headers.
• Required Developer Actions:
  • Ensure the content placed within the header slot is descriptive and clearly indicates the topic of the panel content.
  • Use <plus-accordion-group> when displaying multiple related accordion items for better structure and accessibility.

API Reference

<plus-accordion>

Properties

Name	Type	Default	Description	Required
expand	boolean	false	Whether the accordion is expanded.	No
size	`‘sm'	'md'	'lg’`	'md'
disabled	boolean	false	Disables the accordion.	No

Events

Name	Payload Type	Description
plus-accordion-toggle	CustomEvent<{ expand: boolean }>	Fired when the accordion is toggled.

Slots

Name	Description
header	The header content (clickable part).
panel	The content displayed when the accordion is open.
helper	Optional helper text displayed next to the header.

CSS Shadow Parts

Part	Description
header	The header container element.
panel	The panel container element.
icon	The expand/collapse icon element.
helper	The helper text container.

<plus-accordion-group>

Properties

Name	Type	Default	Description	Required
multi	boolean	false	Allows multiple accordions to be open at once.	No
kind	`‘bordered'	'divided'	'separated’`	'bordered'
size	`‘sm'	'md'	'lg’`	'md'

Slots

Name	Description
(default)	Place <plus-accordion> elements here.

CSS Shadow Parts

Part	Description
container	The main container element for the group.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective