One section of an Accordion: a native <details> with the title in its <summary>. The browser opens and closes it; on interactive pages @bind-Open follows along.

Titlestring?

The heading text. Use an AccordionHeader for richer content.

IconIconData?

An icon before the heading.

Disabledbool = false

Stops the item from being opened or closed.

ContentPaddingResponsive<int>Responsive

Padding inside the content, in spacing steps, in place of the accordion's. 0 lets content such as a table or image run edge to edge.

ContentGapResponsive<int>Responsive

Space between the content's children, in spacing steps, in place of the accordion's.

ChildContentRenderFragment?

The content. It is laid out as a column with a gap, so paragraphs, lists and buttons are spaced without a wrapper.

@bind-Openbool = false @bind: Interactive only

Whether it is open. Use @bind-Open to follow changes on interactive pages.

Idstring?

The element id. Generated when not set.

Plus 16 item props and 4 common props.

`AccordionHeader`

Heading content for an AccordionItem in place of its Title, such as a title with a badge. Keep it to inline content: it's drawn in the item's summary. Write it directly in the item.

ChildContentRenderFragment?

The part's content.

Types (2)

`AccordionVariant`

enum

How an Accordion draws its items.

AccordionVariant values
Value	Description
`Separated`	Each item is its own bordered card, with space between (the default).
`Bordered`	One bordered box with dividers between items.
`Flush`	Dividers only, no outer border or padding at the sides. For sidebars and dense pages.

`ControlSize`

enum

The height of interactive controls. Shared by buttons and form fields, so a button and an input of the same size line up in a row.

ControlSize values
Value	Description
`Sm`	32px tall, small text.
`Md`	36px tall (the default).
`Lg`	44px tall, large text. For touch-first and marketing pages.