Accordion

For each item, show a preview and allow disclosure of a detail panel.

The Accordion may contain one or several items, related or not. An item shows up as a clickable preview (Accordion.Control) and embeds a panel, hidden by default, that we toggle through clicking on the preview.

In Mantine, the panel remains mounted regardless if it's toggled on or off.

In Mantine, we set the chevron at the Accordion root, so it's shared among all items

The panel may be a form. In that case, we may set the chevron as a plus sign, to indicate we intend to add (submit) data to the server.

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

	Accordion.Item value="item2"
		..
earlymorning logo

© 2025 - All rights reserved

Accordion

For each item, show a preview and allow disclosure of a detail panel.

The Accordion may contain one or several items, related or not. An item shows up as a clickable preview (Accordion.Control) and embeds a panel, hidden by default, that we toggle through clicking on the preview.

In Mantine, the panel remains mounted regardless if it's toggled on or off.

In Mantine, we set the chevron at the Accordion root, so it's shared among all items

The panel may be a form. In that case, we may set the chevron as a plus sign, to indicate we intend to add (submit) data to the server.

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

	Accordion.Item value="item2"
		..