The SfAccordionItem component is a wrapper around the native <details> and <summary> HTML elements. It allows you to create an accordion component that expands and collapses content.

The root element of this component is <details>, and any attributes that you apply onto the SfAccordionItem component will be passed to the <details> element. The one exception is the onToggle$ attribute. The component prevents the native browser behavior and implements its own onToggle$ handler.


Basic Accordion

To control the state of the accordion, you can use the open prop. This prop is a boolean that indicates whether the accordion is open or closed.

Accordion Group

This example only allows one item to be open at a time.