Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it styled?

Yes. It comes with default styles that matches the other components' aesthetic.

Is it animated?

Yes. It's animated by default, but you can disable it if you prefer.

An interactive component which expands/collapses a panel.

@radix-ui/primitives

@radix-ui/colors

@radix-ui/react

Prop / Event	Type	Default	Description
`type`	`string`	`'single'`	Determines whether one or multiple items can be opened at the same time.
`collapsible`	`boolean`	`false`	When type is "single", allows closing content when clicking trigger for an open item.
`modelValue`	`string \| array`	`undefined`	The controlled value of the item(s) to expand.

Prop / Event	Type	Default	Description
`value`	`string`	`undefined`	A unique value for the item. Required.

Prop / Event	Type	Default	Description
`modelValue`	`boolean`	`undefined`	The controlled open state of the collapsible.
`defaultOpen`	`boolean`	`false`	The default open state when initially rendered.