Accordion

Accordions are used to toggle the visibility of content.

overviewguidelinesdeva11y
import {
  Accordion,
  AccordionItemGroup,
} from '@cerberus/react'

Usage

The Accordion component is a controlled abstraction of the primitive components that can be used to show or hide content. It can be used in a group with other accordion items to allow for multiple selections.

Cerberus is a three-headed dog from Greek mythology who guards the gates of the underworld, Hades, and prevents the living from entering.

Indicator Position

The AccordionItemGroup component supports two indicator positions: start and end. This changes the position of the icon indicator displayed.

Cerberus is a three-headed dog from Greek mythology who guards the gates of the underworld, Hades, and prevents the living from entering.

Sizes

The Accordion component supports two sizes: sm and lg. This changes the size of the icon indicator displayed.

Cerberus is a three-headed dog from Greek mythology who guards the gates of the underworld, Hades, and prevents the living from entering.

Primitives

You can utilize the primitive components to customize the accordion.

ComponentDescription
AccordionRootThe main container for the accordion items.
AccordionItemRepresents a single item within the accordion.
AccordionItemTriggerThe trigger element that toggles the visibility of the content.
AccordionItemContentThe content that is shown or hidden when the trigger is activated.
AccordionItemIndicatorAn optional indicator to show the state of the accordion item.

API

Accordion

The Accordion component is an abstraction of the primitives and accepts the following props:

NameDefaultDescription
sizelgThe size of the accordion item.

The Accordion is an abstraction of the Root component.

AccordionItemGroup

The AccordionItemGroup component is an abstraction of the primitives and accepts the following props:

NameDefaultDescription
headingThe heading of the accordion item.
valueThe value of the accordion item. Must be unique.
indicatorPositionendThe position of the indicator.

The AccordionItemGroup is an abstraction of the Item component.

Parts

The AccordionParts API is an Object containing the full family of components.

NameDescription
RootThe AccordionRoot component which is the Provider for the family.
ItemThe AccordionItem component which displays the item.
ItemTriggerThe AccordionItemTrigger component which is the visual title that triggers the content to open.
ItemContentThe AccordionItemContent component which displays the content that is revealed from the ItemTrigger.
ItemIndicatorThe AccordionItemIndicator component which displays the indicator (chevron) icon.