Accordion item<mds-accordion-item>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
typographyenumSpecifies the typography of the element
selectedselectedbooleanSpecifies if the component item is selected or not
labelstringSpecifies the title shown when the component is closed or selected
Overview
The <mds-accordion-item> web component is a single collapsible panel of the Magma Design System, designed to be slotted inside its parent <mds-accordion>. It renders a header button paired with an expandable content region; the parent controls which items are open.
Semantic Behavior
Compound child only: Must be placed as a direct default-slot child of <mds-accordion>; it is not used standalone, and the parent’s slot should hold only mds-accordion-item elements, not mixed child types.Parent-driven selection: Clicking the header requests a toggle, but the authoritative open/closed state is resolved by the parent - in single mode opening one item closes its siblings, while in multiple mode each item toggles independently.Emitted events: mdsAccordionItemSelect on open, mdsAccordionItemUnselect on close, and mdsAccordionItemChange on any toggle, each carrying { id, selected }.Default slot: Holds the collapsible body content (text, HTML, or components).
Properties & Visual Configurations
label sets the always-visible header text shown whether the item is open or closed.selected controls whether the panel is expanded; leave it to the parent to manage in coordinated accordions, or set it initially to have a panel start open.typography picks the title style applied to the header label, defaulting to h5. Choose a heavier heading level (h1-h4) for more prominent section headers or action for a compact, control-like header; match it to the document’s heading hierarchy. The header is rendered inside a <button>, whose content is presentational, so the level is visual: assistive technology does not announce it as a heading.