Accordion
Accordions are used to toggle the visibility of content.
- Can contain leading or trailing indicator icons
- Two sizes: small and large
- Keep headings concise and short
- Content should be concise and scannable
Examples
Dynamic Content Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
- Default preferences:
- Large size
- End indicator position
This is a preview of the default Accordion component.
Small Size
The small version can be used in dense content areas like cards within a dashboard.
Responsive Layouts
The Accordion component is responsive and can be used in any layouts using the the default large size.
On this page
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 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
Use Cases
- Users should be able to:
- Navigate to and activate links with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) links |
| Space / Enter | Activates the (non-disabled) links |
On this page