Accordion

An accordion offers one or more items that can expand to disclose more content when interacted with.

item preview and panel disclosure

Accordion items start as clickable previews (Accordion.Control) and embed a panel, toggled on click.

Mantine mounts all panels immediately, regardless of their toggled state.

variants

By default, items are separated by a thin line (default). We can use other variants, such as separated.

behavior

By default, a single panel is displayed at a time. Clicking on another item closes the currently opened one. We can allow multiple concurrent panels with the multiple prop.

(misc) use a panel as a form

The panel may be a form. In that case, we can set the chevron as a plus sign, to signal we add some data.

We set the chevron style at the Accordion root element's level, since all items use it.

<Accordion variant="separated" chevron={<IconPlus />}>
    <Accordion.Item value="item1">
        <Accordion.Control>Log Workout</Accordion.Control>
        <Accordion.Panel>Content</Accordion.Panel>
    </Accordion.Item>
</Accordion>