Accordion

StableAccessible

Accordions can be used to hide and reveal information. When used correctly, they are a good way to make a higher amount of information easier to digest for the user.

Usage
Code
Accessibility
Customisation

Code

Code examples

Default

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Accordion } from 'hds-react';

() => (
  <Accordion heading="How to publish data?" language="en" style={{ maxWidth: '360px' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
)

import { Accordion } from 'hds-react';

() => (
  <Accordion heading="How to publish data?" language="en" style={{ maxWidth: '360px' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
)

With a card

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Accordion } from 'hds-react';

() => (
  <Accordion card border heading="How to publish data?" language="en" style={{ maxWidth: '360px' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
)

import { Accordion } from 'hds-react';

() => (
  <Accordion card border heading="How to publish data?" language="en" style={{ maxWidth: '360px' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
)

With the close button hidden

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Accordion } from 'hds-react';

() => (
  <Accordion card border heading="How to publish data?" language="en" style={{ maxWidth: '360px' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
)

import { Accordion } from 'hds-react';

() => (
  <Accordion card border heading="How to publish data?" language="en" style={{ maxWidth: '360px' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
)

Accordion size variants

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Accordion } from 'hds-react';

() => (<>
  <Accordion size="s" card border heading="How to publish data?" language="en" style={{ maxWidth: '360px' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
  <Accordion size="m" card border heading="How to publish data?" language="en" style={{ maxWidth: '360px', marginTop: 'var(--spacing-s)' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
  <Accordion size="l" card border heading="How to publish data?" language="en" style={{ maxWidth: '360px', marginTop: 'var(--spacing-s)' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
</>)

import { Accordion } from 'hds-react';

() => (<>
  <Accordion size="s" card border heading="How to publish data?" language="en" style={{ maxWidth: '360px' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
  <Accordion size="m" card border heading="How to publish data?" language="en" style={{ maxWidth: '360px', marginTop: 'var(--spacing-s)' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
  <Accordion size="l" card border heading="How to publish data?" language="en" style={{ maxWidth: '360px', marginTop: 'var(--spacing-s)' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
</>)

Stacked Accordions

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Accordion } from 'hds-react';

() => (<>
  <h5>Stacked Accordions</h5>
  <Accordion size="s" headingLevel={6} card border heading="How to publish data?" language="en" style={{ maxWidth: '360px' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
  <Accordion size="s" headingLevel={6} card border heading="How to publish data?" language="en" style={{ maxWidth: '360px', borderTop: 0 }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
  <Accordion size="s" headingLevel={6} card border heading="How to publish data?" language="en" style={{ maxWidth: '360px', borderTop: 0 }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
</>)

import { Accordion } from 'hds-react';

() => (<>
  <h5>Stacked Accordions</h5>
  <Accordion size="s" headingLevel={6} card border heading="How to publish data?" language="en" style={{ maxWidth: '360px' }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
  <Accordion size="s" headingLevel={6} card border heading="How to publish data?" language="en" style={{ maxWidth: '360px', borderTop: 0 }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
  <Accordion size="s" headingLevel={6} card border heading="How to publish data?" language="en" style={{ maxWidth: '360px', borderTop: 0 }}>
    To publish your data, open your profile settings and click the button 'Publish'.
  </Accordion>
</>)

Custom accordion

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Accordion, Card, IconAngleDown, IconAngleUp, Button, Select, useAccordion } from 'hds-react';

() => {
  const initiallyOpen = false;
  const { isOpen, buttonProps, contentProps } = useAccordion({ initiallyOpen });
  const icon = isOpen ? <IconAngleUp aria-hidden /> : <IconAngleDown aria-hidden />;
  return (
    <>
      <Button iconLeft={icon} {...buttonProps}>
        Advanced filters
      </Button>
      <Card border aria-label="Advanced filters" style={{ marginTop: 'var(--spacing-m)' }} {...contentProps}>
        <Select
          multiselect
          label="Filter by event category"
          placeholder="No selected categories"
          options={[{ label: 'Culture & arts' }, { label: 'Sports' }, { label: 'Museums' }, { label: 'Music' }]}
          clearButtonAriaLabel="Clear all selections"
          selectedItemRemoveButtonAriaLabel="Remove"
          style={{ maxWidth: '360px' }}
        />
        <Select
          multiselect
          label="Filter by event location"
          placeholder="No selected locations"
          options={[
            { label: 'Haaga' },
            { label: 'Herttoniemi' },
            { label: 'Kallio' },
            { label: 'Kamppi' },
            { label: 'Laajasalo' },
            { label: 'Lauttasaari' },
            { label: 'Mellunkylä' },
            { label: 'Pasila' },
          ]}
          clearButtonAriaLabel="Clear all selections"
          selectedItemRemoveButtonAriaLabel="Remove"
          style={{ maxWidth: '360px', marginTop: 'var(--spacing-s)' }}
        />
      </Card>
    </>
  );
}

import { Accordion, Card, IconAngleDown, IconAngleUp, Button, Select, useAccordion } from 'hds-react';

() => {
  const initiallyOpen = false;
  const { isOpen, buttonProps, contentProps } = useAccordion({ initiallyOpen });
  const icon = isOpen ? <IconAngleUp aria-hidden /> : <IconAngleDown aria-hidden />;
  return (
    <>
      <Button iconLeft={icon} {...buttonProps}>
        Advanced filters
      </Button>
      <Card border aria-label="Advanced filters" style={{ marginTop: 'var(--spacing-m)' }} {...contentProps}>
        <Select
          multiselect
          label="Filter by event category"
          placeholder="No selected categories"
          options={[{ label: 'Culture & arts' }, { label: 'Sports' }, { label: 'Museums' }, { label: 'Music' }]}
          clearButtonAriaLabel="Clear all selections"
          selectedItemRemoveButtonAriaLabel="Remove"
          style={{ maxWidth: '360px' }}
        />
        <Select
          multiselect
          label="Filter by event location"
          placeholder="No selected locations"
          options={[
            { label: 'Haaga' },
            { label: 'Herttoniemi' },
            { label: 'Kallio' },
            { label: 'Kamppi' },
            { label: 'Laajasalo' },
            { label: 'Lauttasaari' },
            { label: 'Mellunkylä' },
            { label: 'Pasila' },
          ]}
          clearButtonAriaLabel="Clear all selections"
          selectedItemRemoveButtonAriaLabel="Remove"
          style={{ maxWidth: '360px', marginTop: 'var(--spacing-s)' }}
        />
      </Card>
    </>
  );
}

Packages

Package	Included	Storybook link	Source link
HDS React	Yes	View in Storybook	View source
HDS Core	No	-	-

Properties

Note! You can find the full list of properties in the React Storybook.

Property	Description	Values	Default value
`heading`	Heading of the accordion	-	-
`headingLevel`	Sets the aria-level of the accordion header.	1-6	2
`border`	If set to true, a border will be drawn around the accordion card.	`boolean`	false
`card`	If set to true, the accordion will use HDS Card as its background element.	`boolean`	false
`closeButton`	If set to true, a close button is shown at the bottom of an expanded accordion	`boolean`	true
`initiallyOpen`	If set to true, the accordion will be initially opened.	`boolean`	false