Accordion

Use the Accordion to progressively disclose grouped content, letting users reveal and hide sections to reduce page length and focus on what matters.

OverviewPropertiesUsageAccessibility

New

AccordionProps

Signature:

export declare type AccordionProps< extends > = <> & (<> | <>);

AccordionOwnProps

extends, , , , ,

Name	Type	Default	Description
multiple?		false	Determines whether multiple sections can be open at the same time.
triggerPosition?	|	'end'	The position of the trigger that expands and collapses a section.
onExpandChange?	(value: <>) =>		Callback fired when a section is expanded/collapsed.
interactive?		true	If the accordion is interactive, the whole header is interactive and can open or close the accordion. Otherwise, only the button is interactive
color?	| | | |	'neutral'	The color of the accordion. Setting the color affects the button, label, content and divider color.
size?	|	'default'	The size of the accordion.
showDividers?		true	Whether a divider is shown between the sections.

AccordionControlledProps

Name	Type	Default	Description
expanded	extends true ? :		Determines which sections are expanded in a controlled scenario.

AccordionUncontrolledProps

Name	Type	Default	Description
defaultExpanded?	extends true ? :	false	Determines which sections are initially expanded in an uncontrolled scenario.

Accordion.Section

AccordionSectionProps

Signature:

export declare type AccordionSectionProps<E extends > = <<E, >, > & <, >;