• Docs
  • Blog

    • 0.24.0

    • Switch to dark mode
    Get Started
    Components
    Styling
    Theming

    Concepts

    OverviewCompositionTesting

    Layout

    Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridLink OverlayScrollableStackWrap

    Components

    AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

    Utilities

    Feature FlagsForLocal StoragePortalShowsplitPropsTheme

    Accordion

    A way to show and hide information by sections.

    • npm
    • source
    • recipe
    • Ark
    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.
    Cerberus is located in multiple places, including in Greek mythology, in the game Fortnite, and in the game Hades (1 and 2)

    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.
    Cerberus is located in multiple places, including in Greek mythology, in the game Fortnite, and in the game Hades (1 and 2)

    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.
    Cerberus is located in multiple places, including in Greek mythology, in the game Fortnite, and in the game Hades (1 and 2)

    Primitives

    You can utilize the primitive components or the css prop 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.
    Cerberus is the three-headed dog that guards the gates of the Underworld and our sweet baby boi protecting the integrity of your design system.

    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.

    Note

    It is best to only use the AccordionParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.

    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.

    On this page

    • Edit this page on Github
    A fiery cerberus
    A fiery cerberus
    A fiery cerberus
    Cerberus Design System | Docs