Accordion

Accordions are used to toggle the visibility of content.

1
import {
2
  Accordion,
3
  AccordionItemGroup,
4
} 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.

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

Indicator Position

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

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

Sizes

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

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

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.

Cerberus

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.

1
import {
2
  Accordion,
3
  AccordionItemGroup,
4
} from '@cerberus/react'

Usage

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

Indicator Position

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

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

Sizes

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

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

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.

Cerberus

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.

1
import {
2
  Accordion,
3
  AccordionItemGroup,
4
} from '@cerberus/react'

Usage

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

Indicator Position

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

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

Sizes

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

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

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.

Cerberus

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.

1
import {
2
  Accordion,
3
  AccordionItemGroup,
4
} from '@cerberus/react'

Usage

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

Indicator Position

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

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

Sizes

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

What is Cerberus?

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

Who is Cerberus?

Where is Cerberus?

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.

Cerberus

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.