Forma 36 - Accordion

Import

import { Accordion } from '@contentful/f36-components';
// or
import { Accordion } from '@contentful/f36-accordion';

Examples

The accordion has two variations that define the alignment of the chevron icon: left or right.

Basic usage


function AccordionExample() {
  return (
    <Accordion>
      <Accordion.Item title="What payment methods do you accept?">
        <Text>
          Customers on the Team tier can pay with a credit card (American
          Express, MasterCard or Visa). Enterprise customers have the choice of
          paying with a credit card or wire transfer.
        </Text>
      </Accordion.Item>
      <Accordion.Item title="What spaces can I use Compose + Launch on?">
        <Text>
          Once you have purchased Compose + Launch, they can be installed on all
          of your spaces, or only the ones you want to have them on. There is no
          extra cost to install Compose + Launch on multiple spaces.
        </Text>
      </Accordion.Item>
    </Accordion>
  );
}function AccordionExample() {
  return (
    <Accordion>
      <Accordion.Item title="What payment methods do you accept?">
        <Text>
          Customers on the Team tier can pay with a credit card (American
          Express, MasterCard or Visa). Enterprise customers have the choice of
          paying with a credit card or wire transfer.
        </Text>
      </Accordion.Item>
      <Accordion.Item title="What spaces can I use Compose + Launch on?">
        <Text>
          Once you have purchased Compose + Launch, they can be installed on all
          of your spaces, or only the ones you want to have them on. There is no
          extra cost to install Compose + Launch on multiple spaces.
        </Text>
      </Accordion.Item>
    </Accordion>
  );
}
Open in Playground

Using it with other components

Other typographic components can be passed as the accordion's title and anything can be used as the accordion's content. For example:


function AccordionWithOtherComponentExample() {
  return (
    <Accordion>
      <Accordion.Item
        title={
          <SectionHeading marginBottom="none">
            What payment methods do you accept?
          </SectionHeading>
        }
      >
        <Stack flexDirection="column">
          <Text marginBottom="spacingS">
            Customers on the Team tier can pay with a credit card (American
            Express, MasterCard or Visa). Enterprise customers have the choice
            of paying with a credit card or wire transfer.
          </Text>
          <Button onClick={() => console.log('clicked!')}>
            Accordion’s button
          </Button>
        </Stack>
      </Accordion.Item>
      <Accordion.Item
        title={
          <SectionHeading marginBottom="none">
            What can I do in Compose + Launch?
          </SectionHeading>
        }
      >
        <Text marginBottom="spacingS">
          Compose lets editors easily create and manage web content in the
          context of “pages.”
        </Text>
        <List>
          <List.Item>
            Easy page creation. With a clearer view of the content you’re
            creating
          </List.Item>
          <List.Item>
            Integrated SEO settings. Manage SEO titles and description, or hide
            content from search engines
          </List.Item>
          <List.Item>
            Work with structured content. Use existing content models to build
            new page
          </List.Item>
          <List.Item>
            Page localization. Easier to manage pages across multiple markets
            and teams
          </List.Item>
          <List.Item>
            Page localization. Easier to manage pages across multiple markets
            and teams
          </List.Item>
        </List>

        <Text marginBottom="spacingS">
          Launch gives planners visibility and confidence in the orchestration
          of their content releases.
        </Text>
        <List>
          <List.Item>
            Build releases. Published and scheduled groups of content at the
            same time
          </List.Item>
          <List.Item>
            Release calendar. Gives users a clear view of all upcoming published
            and unpublished events
          </List.Item>
          <List.Item>
            Flexible scheduling. Move scheduled releases forward or back in
            seconds
          </List.Item>
          <List.Item>
            Workflow states. Flag content to team members who need to see it
            before publication
          </List.Item>
        </List>
      </Accordion.Item>
    </Accordion>
  );
}function AccordionWithOtherComponentExample() {
  return (
    <Accordion>
      <Accordion.Item
        title={
          <SectionHeading marginBottom="none">
            What payment methods do you accept?
          </SectionHeading>
        }
      >
        <Stack flexDirection="column">
          <Text marginBottom="spacingS">
            Customers on the Team tier can pay with a credit card (American
            Express, MasterCard or Visa). Enterprise customers have the choice
            of paying with a credit card or wire transfer.
          </Text>
          <Button onClick={() => console.log('clicked!')}>
            Accordion’s button
          </Button>
        </Stack>
      </Accordion.Item>
      <Accordion.Item
        title={
          <SectionHeading marginBottom="none">
            What can I do in Compose + Launch?
          </SectionHeading>
        }
      >
        <Text marginBottom="spacingS">
          Compose lets editors easily create and manage web content in the
          context of “pages.”
        </Text>
        <List>
          <List.Item>
            Easy page creation. With a clearer view of the content you’re
            creating
          </List.Item>
          <List.Item>
            Integrated SEO settings. Manage SEO titles and description, or hide
            content from search engines
          </List.Item>
          <List.Item>
            Work with structured content. Use existing content models to build
            new page
          </List.Item>
          <List.Item>
            Page localization. Easier to manage pages across multiple markets
            and teams
          </List.Item>
          <List.Item>
            Page localization. Easier to manage pages across multiple markets
            and teams
          </List.Item>
        </List>

        <Text marginBottom="spacingS">
          Launch gives planners visibility and confidence in the orchestration
          of their content releases.
        </Text>
        <List>
          <List.Item>
            Build releases. Published and scheduled groups of content at the
            same time
          </List.Item>
          <List.Item>
            Release calendar. Gives users a clear view of all upcoming published
            and unpublished events
          </List.Item>
          <List.Item>
            Flexible scheduling. Move scheduled releases forward or back in
            seconds
          </List.Item>
          <List.Item>
            Workflow states. Flag content to team members who need to see it
            before publication
          </List.Item>
        </List>
      </Accordion.Item>
    </Accordion>
  );
}
Open in Playground

Controlled Accordion

By default, the AccordionItem is uncontrolled (manage it's expanded state by itself) But you can make it controlled by providing boolean value to isExpanded for Accordion.Item component


function AccordionExample() {
  const [accordionState, setAccordionState] = useState({
    1: true,
    2: false,
  });

  const handleExpand = (itemIndex) => () => {
    setAccordionState((state) => ({ ...state, [itemIndex]: true }));
  };

  const handleCollapse = (itemIndex) => () => {
    setAccordionState((state) => ({ ...state, [itemIndex]: false }));
  };

  return (
    <Accordion>
      <Accordion.Item
        title="What payment methods do you accept?"
        isExpanded={accordionState[1]}
        onExpand={handleExpand(1)}
        onCollapse={handleCollapse(1)}
      >
        <Text>
          Customers on the Team tier can pay with a credit card (American
          Express, MasterCard or Visa). Enterprise customers have the choice of
          paying with a credit card or wire transfer.
        </Text>
      </Accordion.Item>
      <Accordion.Item
        title="What spaces can I use Compose + Launch on?"
        isExpanded={accordionState[2]}
        onExpand={handleExpand(2)}
        onCollapse={handleCollapse(2)}
      >
        <Text>
          Once you have purchased Compose + Launch, they can be installed on all
          of your spaces, or only the ones you want to have them on. There is no
          extra cost to install Compose + Launch on multiple spaces.
        </Text>
      </Accordion.Item>
    </Accordion>
  );
}function AccordionExample() {
  const [accordionState, setAccordionState] = useState({
    1: true,
    2: false,
  });

  const handleExpand = (itemIndex) => () => {
    setAccordionState((state) => ({ ...state, [itemIndex]: true }));
  };

  const handleCollapse = (itemIndex) => () => {
    setAccordionState((state) => ({ ...state, [itemIndex]: false }));
  };

  return (
    <Accordion>
      <Accordion.Item
        title="What payment methods do you accept?"
        isExpanded={accordionState[1]}
        onExpand={handleExpand(1)}
        onCollapse={handleCollapse(1)}
      >
        <Text>
          Customers on the Team tier can pay with a credit card (American
          Express, MasterCard or Visa). Enterprise customers have the choice of
          paying with a credit card or wire transfer.
        </Text>
      </Accordion.Item>
      <Accordion.Item
        title="What spaces can I use Compose + Launch on?"
        isExpanded={accordionState[2]}
        onExpand={handleExpand(2)}
        onCollapse={handleCollapse(2)}
      >
        <Text>
          Once you have purchased Compose + Launch, they can be installed on all
          of your spaces, or only the ones you want to have them on. There is no
          extra cost to install Compose + Launch on multiple spaces.
        </Text>
      </Accordion.Item>
    </Accordion>
  );
}
Open in Playground

Props (API reference)

Accordion

Name	Type	Default
align	"start" "end" Specify the alignment of the chevron inside the accordion header	end
children	ReactNode Child nodes to be rendered in the component
className	string CSS class to be appended to the root element
testId	string A [data-test-id] attribute used for testing purposes	cf-ui-accordion

Accordion.Item

Name	Type	Default
align	"start" "end" Specify the alignment of the chevron inside the accordion header	end
children	ReactNode The children of the AccordionItem are in fact the content of the accordion
className	string CSS class to be appended to the root element
isExpanded	false true By default, the AccordionItem is uncontrolled (manage it's expanded state by itself) But you can make it controlled by providing boolean
onCollapse	() => void A function to be called when the accordion item is closed
onExpand	() => void A function to be called when the accordion item is opened
testId	string A [data-test-id] attribute used for testing purposes	cf-ui-accordion-item
title	string number false true {} ReactElement<any, string \| JSXElementConstructor<any>> ReactNodeArray ReactPortal The accordion title	Accordion Title
titleElement	"h1" "h2" "h3" "h4" "h5" "h6" The heading element that will be used by the AccordionHeader	h2

Content guidelines

The title should be a short message that summarize the content of the accordion.
Anything can be passed as the content of the accordion, but often organizing it with Texts and Tables would be enough.
When using headings, be mindful about the heading levels. The header is a Subheading with h2 tag.

Accessibility

It allows keyboard navigation to open and close the accordions