Accordion - React

View on Figma View on GitHub

import { Accordion } from '@sky-uk/ui-core';

<Accordion id="example-intro">
  <Accordion.Heading>Accordion Heading</Accordion.Heading>
  <Accordion.Content>Content area</Accordion.Content>
</Accordion>

<Accordion id="example-intro">
  <Accordion.Heading>Accordion Heading</Accordion.Heading>
  <Accordion.Content>Content area</Accordion.Content>
</Accordion>

Props

id

The id attribute sets the appropriate aria attributes to provide semantic relationship between the Heading and Content.

<Accordion id="example-id">

The id is essential for the Accordion to function correctly and must be a unique value when multiple Accordions are used on a page.

$isOpen

Set the initial state of the Accordion.

<Accordion id="example-is-open" $isOpen>
  <Accordion.Heading>Accordion Heading</Accordion.Heading>
  <Accordion.Content>
    <Text as="p">Content area</Text>
  </Accordion.Content>
</Accordion>

<Accordion id="example-is-open" $isOpen>
  <Accordion.Heading>Accordion Heading</Accordion.Heading>
  <Accordion.Content>
    <Text as="p">Content area</Text>
  </Accordion.Content>
</Accordion>

$headingLevel

The $headingLevel prop allows you to set the heading level of the Accordion. This is useful for accessibility and SEO purposes.

<Accordion id="example-heading-level">
  <Accordion.Heading $headingLevel="h2">Accordion Heading</Accordion.Heading>
  <Accordion.Content>
    <Text as="p">Content area</Text>
  </Accordion.Content>
</Accordion>

<Accordion id="example-heading-level">
  <Accordion.Heading $headingLevel="h2">Accordion Heading</Accordion.Heading>
  <Accordion.Content>
    <Text as="p">Content area</Text>
  </Accordion.Content>
</Accordion>

Subcomponents

Accordion.Heading - the heading accepts onBlur, onFocus, onMouseEnter and onMouseLeave to trigger additional actions.
Accordion.Content - container for content which handles the open/closed state.

Callbacks

The onOpen and onClose callbacks can be used to trigger additional actions when the Accordion is opened or closed.

function Example() {
  const [callback, setCallback] = React.useState('nothing');

  const handleOpen = () => {
    setCallback('opened');
  }

  const handleClose = () => {
    setCallback('closed');
  }

  return (
    <Flex $flexDirection="column" $gap={5}>
        <Accordion id="example-callbacks" onOpen={handleOpen} onClose={handleClose}>
          <Accordion.Heading>Heading</Accordion.Heading>
          <Accordion.Content>Content goes here.</Accordion.Content>
        </Accordion>
      <Text>The last callback was {callback}</Text>
    </Flex>
  )
}

function Example() {
  const [callback, setCallback] = React.useState('nothing');

  const handleOpen = () => {
    setCallback('opened');
  }

  const handleClose = () => {
    setCallback('closed');
  }

  return (
    <Flex $flexDirection="column" $gap={5}>
        <Accordion id="example-callbacks" onOpen={handleOpen} onClose={handleClose}>
          <Accordion.Heading>Heading</Accordion.Heading>
          <Accordion.Content>Content goes here.</Accordion.Content>
        </Accordion>
      <Text>The last callback was {callback}</Text>
    </Flex>
  )
}

Presentation

Some designs call for an Accordion with container styles applied. You can achieve this by wrapping the Accordion inside of a Box component as demonstrated below.

Bordered

<Box $border $borderRadius={1} $paddingX="4" $paddingY="2">
  <Accordion id="example-bordered">
    <Accordion.Heading>Heading</Accordion.Heading>
    <Accordion.Content>Content goes here.</Accordion.Content>
  </Accordion>
</Box>

<Box $border $borderRadius={1} $paddingX="4" $paddingY="2">
  <Accordion id="example-bordered">
    <Accordion.Heading>Heading</Accordion.Heading>
    <Accordion.Content>Content goes here.</Accordion.Content>
  </Accordion>
</Box>

Drop Shadow

<Box $boxShadow={1} $borderRadius={1} $paddingX="4" $paddingY="2">
  <Accordion id="example-drop-shadow">
    <Accordion.Heading>Heading</Accordion.Heading>
    <Accordion.Content>Content goes here.</Accordion.Content>
  </Accordion>
</Box>

<Box $boxShadow={1} $borderRadius={1} $paddingX="4" $paddingY="2">
  <Accordion id="example-drop-shadow">
    <Accordion.Heading>Heading</Accordion.Heading>
    <Accordion.Content>Content goes here.</Accordion.Content>
  </Accordion>
</Box>

System Modifiers

The Accordion component also supports the props applied using the following system modifiers:

margin
width