Accordion
A vertically stacked set of interactive headings that each reveal a section of content
Interactive-mode
Examples
Single (default)
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It comes with default styles that match the design system.
Yes. It uses CSS animations for smooth transitions.
Multiple
Content for section one. You can open multiple sections at the same time.
Content for section two. This section can be open alongside section one.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Accordion | Root of the accordion. Controls expand-one-at-a-time versus expand-many behaviour and registers its AccordionItem children via a cascading value. |
| AccordionItem | A single expandable row inside the Accordion. Holds its own open/closed state and registers with the parent on initialisation. |
| AccordionTrigger | The clickable heading row that toggles its AccordionItem. Renders the chevron icon and handles the rotation animation when open. |
| AccordionContent | The revealed body of an AccordionItem. Uses a grid-template-rows 0fr→1fr transition so open/close animates smoothly without JS measurement. |
Accordion
Root of the accordion. Controls expand-one-at-a-time versus expand-many behaviour and registers its AccordionItem children via a cascading value.
| Property | Type | Required | Description |
|---|---|---|---|
| Type | AccordionType | Expansion mode. Default: AccordionType.Single (opening one item closes the others). Other value: Multiple (independent open state per item). | |
| Disabled | bool | Disables every item. Item-level Disabled is unioned with this. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the outer container. | |
| ChildContent | RenderFragment | The accordion's items. Must contain one or more AccordionItem children. |
AccordionItem
A single expandable row inside the Accordion. Holds its own open/closed state and registers with the parent on initialisation.
| Property | Type | Required | Description |
|---|---|---|---|
| Disabled | bool | When true, this item cannot be toggled even if the parent is enabled. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the item wrapper. | |
| ChildContent | RenderFragment? | Should contain one AccordionTrigger and one AccordionContent. |
AccordionTrigger
The clickable heading row that toggles its AccordionItem. Renders the chevron icon and handles the rotation animation when open.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the trigger button. | |
| ChildContent | RenderFragment? | Trigger label — typically a string or inline markup. |
AccordionContent
The revealed body of an AccordionItem. Uses a grid-template-rows 0fr→1fr transition so open/close animates smoothly without JS measurement.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the inner content wrapper. | |
| ChildContent | RenderFragment? | The body content revealed when the item is open. |