Skip to content
Telescope
Components

Accordion

A stacked set of interactive items that you can click to show more information. Each item can be either collapsed or expanded to reveal the complete content.

We'll send all admins an email when your wallet balance reaches
14,000.00 GBP

Features

  • Supports items with optional design elements (e.g. Icon, Description, Badge, Counter)

  • Supports default opened item
  • Supports controlled state

When to use

Accordions reveal content progressively, allowing users to access relevant information as needed. This makes it easier to understand complex information and reduces cognitive load. They also shorten pages by organising related information together, reducing vertical scrolling for non-crucial content especially on smaller screens.

Information:

Accordions conceal information, so avoid using them for important details.

For optimal user experience, we recommend maintaining the expanded state of items until the user chooses to collapse them. This enables users to conveniently review content across multiple items simultaneously.

Examples

With icon

Icons make it easier to quickly scan and recognise items in an accordion. We suggest using icons to maximise the visual distinction between items in accordions with multiple different entries, for example when there are 4 or more items.

Show code
<Accordion>
    <Accordion.Item value="entertainment">
        <Accordion.Header headingLevel="h2" heading="Entertainment" Icon={CategoryEntertainment} />
        <Accordion.Content>
            <Text>
                Entertainment enriches lives by offering diverse and engaging experiences, fostering
                connections, and providing a valuable escape from the routine of daily existence.
            </Text>
        </Accordion.Content>
    </Accordion.Item>
    <Accordion.Item value="meals">
        <Accordion.Header
            headingLevel="h2"
            heading="Meals &amp; Drinks"
            Icon={CategoryMealsAndDrinks}
        />
        <Accordion.Content>
            <Text>
                Exploring the rich tapestry of flavors in food and drink is not just a necessity for
                sustenance but an art that connects cultures, stimulates the senses, and brings joy
                to the human experience.
            </Text>
        </Accordion.Content>
    </Accordion.Item>
    <Accordion.Item value="travel">
        <Accordion.Header headingLevel="h2" heading="Travel" Icon={CategoryTravel} />
        <Accordion.Content>
            <Text>
                Travel opens doors to new horizons, offering a journey of discovery, cultural
                immersion, and personal growth as one explores the diverse landscapes and
                experiences the beauty of the world.
            </Text>
        </Accordion.Content>
    </Accordion.Item>
    <Accordion.Item value="none">
        <Accordion.Header headingLevel="h2" heading="Nothing" Icon={CategoryNone} />
        <Accordion.Content>
            <Text>
                In the vast emptiness of nothingness, existence grapples with the futility of
                meaning in a universe devoid of inherent purpose.
            </Text>
        </Accordion.Content>
    </Accordion.Item>
</Accordion>

With badge

Use badges to show the status of an item.

Show code
<Accordion>
    <Accordion.Item value="low-balance">
        <Accordion.Header
            headingLevel="h2"
            heading="Low balance alert"
            badgeProps={{variant: 'positive', content: 'On'}}
        />
        <Accordion.Content>
            <Text>Get alerted when your balance is low.</Text>
        </Accordion.Content>
    </Accordion.Item>
    <Accordion.Item value="balance-statement">
        <Accordion.Header
            headingLevel="h2"
            heading="Balance statement"
            badgeProps={{variant: 'neutral', content: 'Off'}}
        />
        <Accordion.Content>
            <Text>Get your balance statement sent to you every day.</Text>
        </Accordion.Content>
    </Accordion.Item>
</Accordion>

With description

Descriptions provide additional information useful to the user, for example timestamps. These should only be added if actually necessary, and should be as short as possible.

Show code
<Accordion>
    <Accordion.Item value="physical-cards-0">
        <Accordion.Header headingLevel="h2" heading="7 cards" description="10 Jan 24" />
        <Accordion.Content>
            <Text>7 cards were dispatched on 10th January.</Text>
        </Accordion.Content>
    </Accordion.Item>
    <Accordion.Item value="physical-cards-1">
        <Accordion.Header headingLevel="h2" heading="4 cards" description="5 Jan 24" />
        <Accordion.Content>
            <Text>4 cards were dispatched on 5th January.</Text>
        </Accordion.Content>
    </Accordion.Item>
</Accordion>

With counter

Counters quickly convey the number of items within an accordion.

Show code
<Accordion>
    <Accordion.Item value="uploads">
        <Accordion.Header headingLevel="h2" heading="Uploads" count={6} />
        <Accordion.Content>
            <List>
                <List.Item>
                    <ListIcon as={File} />
                    Invoice_2024_001.pdf
                </List.Item>
                <List.Item>
                    <ListIcon as={File} />
                    ABC_Company_Invoice_January.pdf
                </List.Item>
                <List.Item>
                    <ListIcon as={File} />
                    Client123_Invoice_002.pdf
                </List.Item>
                <List.Item>
                    <ListIcon as={File} />
                    ServiceFee_Invoice_2024.pdf
                </List.Item>
                <List.Item>
                    <ListIcon as={File} />
                    ProjectX_Billing_Statement.pdf
                </List.Item>
                <List.Item>
                    <ListIcon as={File} />
                    MonthlyInvoice_Client456.pdf
                </List.Item>
            </List>
            <Text>All uploaded documents.</Text>
        </Accordion.Content>
    </Accordion.Item>
</Accordion>

With footer

Provides an additional section for content and actions, remaining visible even when the accordion is closed.

Show code
<Accordion>
    <Accordion.Item value="uploads">
        <Accordion.Header headingLevel="h2" heading="Uploads" />
        <Accordion.Content>
            <Text>Nothing has been uploaded yet.</Text>
        </Accordion.Content>
        <Accordion.Footer>
            <Inline justifyContent="space-between">
                <Text>invoices@pleo.io</Text>
                <Link>Copy to clipboard</Link>
            </Inline>
        </Accordion.Footer>
    </Accordion.Item>
</Accordion>

Best practices

Do
Use accordions to progressively reveal content and reduce cognitive load.
Don't
Avoid using accordions for critical or essential information that should always be visible.
Do
Use accordions to organize and group related content logically.
Don't
Avoid combining unrelated content within the same accordion, making it challenging for users to find information..
Do
Provide clear and concise section titles, and short descriptions only if necessary.
Don't
Avoid combining too many header components such as a counter and a badge.
Do
Include relevant, helpful, brief and easy to understand content within each accordion section.
Don't
Avoid using accordions as a hiding place for irrelevant or unnecessary information.
Do
Allow users to keep multiple sections open simultaneously for efficient content comparison.
Don't
Avoid forcing all other sections to close when a new section is opened (unless necessary).

Accessibility

We use @radix-ui/react-accordion to make the Accordion accessibile. Adheres to the Dialog WAI-ARIA design pattern.

Related components

  • Tabs: Tabs are labeled controls that allow users to switch between multiple views within a page.
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page