Accordion

The example below loads live from Storybook; open it in Storybook to use the controls. Click a header to see the content appear and the chevron turn.

Live example, StorybookOpen in Storybook

Default

Accordion comes in the line look with 40 px headers, rules between items and no inline padding. By default one item stays open at a time; opening a new one closes the open one.

First heading

Section content goes here.

Second heading

Third heading

LightDark

Copy code

import { Accordion, AccordionItem, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Accordion defaultValue={["first"]}>
        <AccordionItem value="first" title="First heading">Section content goes here.</AccordionItem>
        <AccordionItem value="second" title="Second heading">Section content goes here.</AccordionItem>
        <AccordionItem value="third" title="Third heading">Section content goes here.</AccordionItem>
      </Accordion>
    </Provider>
  );
}

Contained

variant="contained" puts each item in a bordered box. description adds a short second line under the title and icon adds a decorative icon before it.

First heading Short description text

Section content goes here.

Second heading

Third heading

LightDark

Copy code

import { Accordion, AccordionItem, Provider } from '@bigbang/ui';

export default function Contained() {
  return (
    <Provider locale="en-GB">
      <Accordion variant="contained" defaultValue={["first"]}>
        <AccordionItem value="first" title="First heading" description="Short description text" icon="info">Section content goes here.</AccordionItem>
        <AccordionItem value="second" title="Second heading">Section content goes here.</AccordionItem>
        <AccordionItem value="third" title="Third heading">Section content goes here.</AccordionItem>
      </Accordion>
    </Provider>
  );
}

Several items open

multiple lets more than one item stay open. defaultValue sets which items are open on first render.

First heading

Section content goes here.

Second heading

Section content goes here.

Third heading

LightDark

Copy code

import { Accordion, AccordionItem, Provider } from '@bigbang/ui';

export default function Multiple() {
  return (
    <Provider locale="en-GB">
      <Accordion multiple defaultValue={["first", "second"]}>
        <AccordionItem value="first" title="First heading">Section content goes here.</AccordionItem>
        <AccordionItem value="second" title="Second heading">Section content goes here.</AccordionItem>
        <AccordionItem value="third" title="Third heading">Section content goes here.</AccordionItem>
      </Accordion>
    </Provider>
  );
}

Disabled

disabled makes an item unable to open or close. Put it on Accordion to turn off every item at once.

First heading

Section content goes here.

Second heading

Third heading

LightDark

Copy code

import { Accordion, AccordionItem, Provider } from '@bigbang/ui';

export default function Disabled() {
  return (
    <Provider locale="en-GB">
      <Accordion defaultValue={["first"]}>
        <AccordionItem value="first" title="First heading">Section content goes here.</AccordionItem>
        <AccordionItem value="second" title="Second heading">Section content goes here.</AccordionItem>
        <AccordionItem value="third" title="Third heading" disabled>Section content goes here.</AccordionItem>
      </Accordion>
    </Provider>
  );
}

Light and dark mode

Colours come from the color-line-*, color-fg-* and color-surface-* tokens; no separate setup is needed for either mode.

Light

First heading Short description text

Section content goes here.

Second heading

Third heading

Dark

First heading Short description text

Section content goes here.

Second heading

Third heading

Copy code

import { Accordion, AccordionItem, Provider } from '@bigbang/ui';

export default function Contained() {
  return (
    <Provider locale="en-GB">
      <Accordion variant="contained" defaultValue={["first"]}>
        <AccordionItem value="first" title="First heading" description="Short description text" icon="info">Section content goes here.</AccordionItem>
        <AccordionItem value="second" title="Second heading">Section content goes here.</AccordionItem>
        <AccordionItem value="third" title="Third heading">Section content goes here.</AccordionItem>
      </Accordion>
    </Provider>
  );
}