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.
Indicator Position
The AccordionItemGroup component supports two indicator positions: start and end. This changes the position of the icon indicator displayed.
Sizes
The Accordion component supports two sizes: sm and lg. This changes the size of the icon indicator displayed.
Primitives
You can utilize the primitive components or the css prop to customize the accordion.
| Component | Description |
|---|---|
| AccordionRoot | The main container for the accordion items. |
| AccordionItem | Represents a single item within the accordion. |
| AccordionItemTrigger | The trigger element that toggles the visibility of the content. |
| AccordionItemContent | The content that is shown or hidden when the trigger is activated. |
| AccordionItemIndicator | An 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:
| Name | Default | Description |
|---|---|---|
| size | lg | The 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:
| Name | Default | Description |
|---|---|---|
| heading | The heading of the accordion item. | |
| value | The value of the accordion item. Must be unique. | |
| indicatorPosition | end | The 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.
| Name | Description |
|---|---|
| Root | The AccordionRoot component which is the Provider for the family. |
| Item | The AccordionItem component which displays the item. |
| ItemTrigger | The AccordionItemTrigger component which is the visual title that triggers the content to open. |
| ItemContent | The AccordionItemContent component which displays the content that is revealed from the ItemTrigger. |
| ItemIndicator | The AccordionItemIndicator component which displays the indicator (chevron) icon. |
On this page
