Accordion

Establish one or more expandable items that disclose more content when interacted with.

item: show a preview and enable disclosure of a panel

The Accordion contains one or several items. An item starts as a clickable preview (Accordion.Control) and embeds a panel, that starts as hidden, and that is toggled on click.

Mantine mounts all panels immediately, regardless of their toggle state. 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>

items appearance

By default, items are separated by a thin line. We can set variant to separated instead, or other variants.