Accordion

Accordion is used to display a list of high-level options that can expand/collapse to reveal more information.

Accordion components

Accordion: The wrapper that uses cloneElement to pass its prop to AccordionItem.
AccordionItem: A single accordion item.
AccordionHeader: It is used to toggle the expand/collapse state of the accordion item.
AccordionPanel: The container for the details to be revealed.
AccordionIcon: A chevron-down icon that rotates based on the expand/collapse state.

Import

import {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionPanel,
  AccordionIcon,
} from '@trendmicro/react-styled-ui';import {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionPanel,
  AccordionIcon,
} from '@trendmicro/react-styled-ui';

Usage

By default, only one item may be expanded and it can only be collapsed again by expanding another.


EDITABLE EXAMPLE
<Accordion>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 1
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 2
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
</Accordion><Accordion>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 1
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 2
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Expand multiple items at once

If you set allowMultiple to true, then the accordion will permit multiple items to be expanded at once.

If you pass this prop, ensure that the index or defaultIndex prop is an array.


EDITABLE EXAMPLE
<Accordion
  defaultIndex={[0]}
  allowMultiple
>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 1
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 2
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
</Accordion><Accordion
  defaultIndex={[0]}
  allowMultiple
>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 1
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 2
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Toggle each accordion item

If you set allowToggle to true, any expanded item may be collapsed again.


EDITABLE EXAMPLE
<Accordion allowToggle>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 1
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 2
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
</Accordion><Accordion allowToggle>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 1
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 2
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Styling the expanded state

The AccordionItem component has the render prop isExpanded set to true or false.


EDITABLE EXAMPLE
<AccordionItem>
  {({ isExpanded }) => (
    <>
      <AccordionHeader
        bg={isExpanded ? 'blue:80': 'blue:60'}
        _hover={{ bg: 'blue:70' }}
        _active={{ bg: 'blue:80' }}
        p="3x"
      >
        <Flex justify="space-between">
          Click Me
          <AccordionIcon />
        </Flex>
      </AccordionHeader>
      <AccordionPanel>
        <Text whiteSpace="pre-wrap" p="3x">
          Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
        </Text>
      </AccordionPanel>
    </>
  )}
</AccordionItem><AccordionItem>
  {({ isExpanded }) => (
    <>
      <AccordionHeader
        bg={isExpanded ? 'blue:80': 'blue:60'}
        _hover={{ bg: 'blue:70' }}
        _active={{ bg: 'blue:80' }}
        p="3x"
      >
        <Flex justify="space-between">
          Click Me
          <AccordionIcon />
        </Flex>
      </AccordionHeader>
      <AccordionPanel>
        <Text whiteSpace="pre-wrap" p="3x">
          Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
        </Text>
      </AccordionPanel>
    </>
  )}
</AccordionItem>

Accessing the internal state

If you need access to the internal state of each accordion item, you can use a render prop. It provides 2 internal state: isDisabled and isExpanded`.


EDITABLE EXAMPLE
<Accordion allowMultiple>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 1
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    {({ isDisabled, isExpanded }) => (
      <>
        <AccordionHeader>
          <Flex justify="space-between">
            Section 2
            <Icon
              icon={isExpanded ? 'minus' : 'add'}
              style={{
                opacity: isDisabled ? .4 : 1,
                transform: isExpanded ? null : 'rotate(-90deg)',
                transition: 'transform 0.2s',
                transformOrigin: 'center',
              }}
            />
          </Flex>
        </AccordionHeader>
        <AccordionPanel>
          <Text whiteSpace="pre-wrap" p="3x">
            Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
          </Text>
        </AccordionPanel>
      </>
    )}
  </AccordionItem>
</Accordion><Accordion allowMultiple>
  <AccordionItem>
    <AccordionHeader>
      <Flex justify="space-between">
        Section 1
        <AccordionIcon />
      </Flex>
    </AccordionHeader>
    <AccordionPanel>
      <Text whiteSpace="pre-wrap" p="3x">
        Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
      </Text>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    {({ isDisabled, isExpanded }) => (
      <>
        <AccordionHeader>
          <Flex justify="space-between">
            Section 2
            <Icon
              icon={isExpanded ? 'minus' : 'add'}
              style={{
                opacity: isDisabled ? .4 : 1,
                transform: isExpanded ? null : 'rotate(-90deg)',
                transition: 'transform 0.2s',
                transformOrigin: 'center',
              }}
            />
          </Flex>
        </AccordionHeader>
        <AccordionPanel>
          <Text whiteSpace="pre-wrap" p="3x">
            Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
          </Text>
        </AccordionPanel>
      </>
    )}
  </AccordionItem>
</Accordion>

Accessibility

Pressing space or enter when focus is on the accordion panel header will toggle (expand or collapse) the accordion.

Props

Accordion

Name	Type	Default	Description
allowMultiple	boolean	false	If `true`, multiple accordion items can be expanded at once.
allowToggle	boolean	false	If `true`, any expanded accordion item can be collapsed again.
index	number \| array		The index(es) of the expanded accordion item.
defaultIndex	number \| array		The initial index(es) of the expanded accordion item.
onChange	function		A callback invoked when accordion items are expanded or collapsed.
children	ReactNode		The content of the accordion. The children must be one of the `AccordionHeader` and `AccordionPanel` components.

AccordionItem

Name	Type	Default	Description
id	string		A unique id for the accordion item.
isOpen	boolean	false	If `true`, expands the accordion in the controlled mode.
defaultIsOpen	boolean	false	If `true`, expands the accordion by on initial mount.
isDisabled	boolean	false	If `true`, the accordion header will be disabled.
onChange	function		A callback fired when the accordion is expanded/collapsed.
children	ReactNode \| (RenderProps) => ReactNode		The content of the accordion. The children must be one of the `AccordionHeader` and `AccordionPanel` components.