Skip to main content

Accordion

Allows users to expand and collapse sections of content.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Accordion } from '@iag/chroma-react-ui.components';

Accessibility​

Accessibility Documentation(opens in new window)

Default​

Initial state expanded​

There are two ways to do this

  1. Set as initial state in the Accordion element
  2. Set as a property isInitiallyExpanded in the AccordionItem element

Example with icon​

Properties​

Name
Description
  • children*
    ReactNodeContent to be displayed inside the component
  • className
    stringAdditional CSS classes to be applied
  • id*
    stringHTML id attribute for the component
  • initial
    string[]An array of ids that indicate which items should be open on render
  • showExpandButton
    booleandisplays a button that will expand all/collapse all accordion items

CSS Variables​