Pluma
About
MCP Server
Getting started
Contributing
Breaking Changes
Changelog
Content
Icons
Motion
Style Utilities
Test Helpers
Tokens
Overview
Status
Accordion
AccordionGroup
Box
Card
CenterBaseline
Divider
EmptyState
Flex
FormLayout
Grid
InlineStack
Panel
Scrollable
Stack
Code
DescriptionList
Emphasis
Heading
List
Paragraph
Strong
Text
TextLabel
Truncated
Avatar
CodeBlock
Coin
Icon
Image
LabelIcon
Breadcrumbs
Link
NavItem
Page
Pagination
PlainLink
SideNav
Tabs
TabNav
Button
ButtonGroup
CloseButton
DropdownMenu
PlainButton
ToggleButton
Checkbox
CheckboxGroup
ColorPicker
Combobox
DatePicker
Form
JsonField
NumberField
OptionCard
OptionCardGroup
Radio
RadioGroup
Search
SegmentedControl
Select
Slider
TextArea
TextField
Toggle
Badge
DataTable
Filters
FormattedDateTime
FormattedRelativeTime
KeyboardShortcut
Label
ProgressBar
ProgressCircle
StatusIndicator
Table
Tag
Banner
PageLoader
SkeletonShape
SkeletonText
Snackbar
Spinner
Blanket
ConfirmationModal
Drawer
Modal
Modal manager
Popover
Tooltip
VisuallyHidden
Anti-patterns
Combobox with Add New
Density
Inline Form Controls
Refinement levers
Search with DropdownMenu
States
Voice
Ember Floating UI
Ember prop spreading
ModalPrimitive
PlumaProvider
PopoverPrimitive
Portal
React Yield
fly-alert
fly-badge
fly-btn
fly-card
fly-close
fly-label
fly-panel
fly-progress
fly-range
fly-spinner
fly-tag
Forms
Lists
Tailwind
Componentsv2.170.1
Iconsv1.15.0
MCPv0.8.18
Tokensv0.34.1

AccordionGroup

Github
Storybook

AccordionGroup is the wrapper component for Accordions. It allows for limiting open accordions and helps standardize styling.

Importing

The component can be imported via:

import { 
  AccordionGroup, 
  Accordion, 
  AccordionTitle, 
  AccordionContent 
} from '@customerio/pluma-components/react';

Usage

Frodo
I will take it! I will take the Ring to Mordor. Though — I do not know the way.
Gandalf
I will help you bear this burden, Frodo Baggins, as long as it is yours to bear.
Aragorn
If by my life or death, I can protect you, I will. You have my sword.
Legolas
And you have my bow.
Gimli
And my axe!
Boromir
You carry the fate of us all little one. If this is indeed the will of the Council, then Gondor will see it done.
Samwise
Mister Frodo is not going anywhere without me!
Merry & Pippin
Wait! We are coming too!
<AccordionGroup>
  <Accordion>
    <AccordionTitle>Frodo</AccordionTitle>
    <AccordionContent>
      I will take it! I will take the Ring to Mordor. Though — I do not know the way.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Gandalf</AccordionTitle>
    <AccordionContent>
      I will help you bear this burden, Frodo Baggins, as long as it is yours to bear.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Aragorn</AccordionTitle>
    <AccordionContent>
      If by my life or death, I can protect you, I will. You have my sword.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Legolas</AccordionTitle>
    <AccordionContent>
      And you have my bow.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Gimli</AccordionTitle>
    <AccordionContent>
      And my axe!
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Boromir</AccordionTitle>
    <AccordionContent>
      You carry the fate of us all little one. If this is indeed the will of the Council, then Gondor will see it done.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Samwise</AccordionTitle>
    <AccordionContent>
      Mister Frodo is not going anywhere without me!
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Merry & Pippin</AccordionTitle>
    <AccordionContent>
      Wait! We are coming too!
    </AccordionContent>
  </Accordion>
</AccordionGroup>

Allow Multiple Open Accordions

By default, the AccordionGroup will not allow multiple accordions to be open at the same time. This can be changed by setting shouldAllowMultipleOpen to true.

Frodo
I will take it! I will take the Ring to Mordor. Though — I do not know the way.
Gandalf
I will help you bear this burden, Frodo Baggins, as long as it is yours to bear.
Aragorn
If by my life or death, I can protect you, I will. You have my sword.
Legolas
And you have my bow.
Gimli
And my axe!
Boromir
You carry the fate of us all little one. If this is indeed the will of the Council, then Gondor will see it done.
Samwise
Mister Frodo is not going anywhere without me!
Merry & Pippin
Wait! We are coming too!
<AccordionGroup shouldAllowMultipleOpen={true}>
  <Accordion>
    <AccordionTitle>Frodo</AccordionTitle>
    <AccordionContent>
      I will take it! I will take the Ring to Mordor. Though — I do not know the way.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Gandalf</AccordionTitle>
    <AccordionContent>
      I will help you bear this burden, Frodo Baggins, as long as it is yours to bear.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Aragorn</AccordionTitle>
    <AccordionContent>
      If by my life or death, I can protect you, I will. You have my sword.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Legolas</AccordionTitle>
    <AccordionContent>
      And you have my bow.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Gimli</AccordionTitle>
    <AccordionContent>
      And my axe!
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Boromir</AccordionTitle>
    <AccordionContent>
      You carry the fate of us all little one. If this is indeed the will of the Council, then Gondor will see it done.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Samwise</AccordionTitle>
    <AccordionContent>
      Mister Frodo is not going anywhere without me!
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Merry & Pippin</AccordionTitle>
    <AccordionContent>
      Wait! We are coming too!
    </AccordionContent>
  </Accordion>
</AccordionGroup>

Default Open

You can set all accordions to be open by default by utilizing the defaultOpen property on the group.

Frodo
I will take it! I will take the Ring to Mordor. Though — I do not know the way.
Gandalf
I will help you bear this burden, Frodo Baggins, as long as it is yours to bear.
Aragorn
If by my life or death, I can protect you, I will. You have my sword.
Legolas
And you have my bow.
Gimli
And my axe!
Boromir
You carry the fate of us all little one. If this is indeed the will of the Council, then Gondor will see it done.
Samwise
Mister Frodo is not going anywhere without me!
Merry & Pippin
Wait! We are coming too!
<AccordionGroup defaultOpen={true}>
  <Accordion>
    <AccordionTitle>Frodo</AccordionTitle>
    <AccordionContent>
      I will take it! I will take the Ring to Mordor. Though — I do not know the way.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Gandalf</AccordionTitle>
    <AccordionContent>
      I will help you bear this burden, Frodo Baggins, as long as it is yours to bear.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Aragorn</AccordionTitle>
    <AccordionContent>
      If by my life or death, I can protect you, I will. You have my sword.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Legolas</AccordionTitle>
    <AccordionContent>
      And you have my bow.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Gimli</AccordionTitle>
    <AccordionContent>
      And my axe!
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Boromir</AccordionTitle>
    <AccordionContent>
      You carry the fate of us all little one. If this is indeed the will of the Council, then Gondor will see it done.
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Samwise</AccordionTitle>
    <AccordionContent>
      Mister Frodo is not going anywhere without me!
    </AccordionContent>
  </Accordion>
  <Accordion>
    <AccordionTitle>Merry & Pippin</AccordionTitle>
    <AccordionContent>
      Wait! We are coming too!
    </AccordionContent>
  </Accordion>
</AccordionGroup>

API

PlumaAccordionGroup extends Box

defaultOpen  boolean | undefined

Default:false

Whether all accordions should be open by default. Note that this will force shouldAllowMultipleOpen to true on first render.

shouldAllowMultipleOpen  boolean | undefined

Default:false

Whether to allow multiple accordions to be open at the same time

On this page

Importing
Usage
Allow Multiple Open Accordions
Default Open
API