---
id: accordion
title: Accordion
---
 
# Accordion

This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.

The accordion component lets users show and hide sections of related content on a page.

## How to use


<code src="@digigov/ui/src/content/Accordion/__stories__/Default.tsx" />

### With Hints

Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.

<code src="@digigov/ui/src/content/Accordion/__stories__/WithHints.tsx" />

## Accessibility

You can read more about the accessibility patterns used in our Accordion
implementation in the [ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).

## API

See below for a complete reference to all of the props  available to the components mentioned here.

<ComponentProps componentName={["Accordion", "AccordionSection","AccordionSectionSummary","AccordionSectionSummaryHeading","AccordionSectionContent"]} />