Accordion – Once UI

A collapsible container that allows users to expand and collapse sections of content, helping to organize information in a compact way. It's useful for FAQs, navigation menus, and any content that benefits from progressive disclosure.

Accordion

Example

Example content

Example

<Column fillWidth>
	<Accordion title="Example" open>
		<Text onBackground="neutral-weak">
			Example content
		</Text>
	</Accordion>
	<Accordion title="Example">
		<Text onBackground="neutral-weak">
			Example content
		</Text>
	</Accordion>
</Column>

API reference

	Type	Default
titlerequired	React.ReactNode	—
children	React.ReactNode	—
icon	IconName	chevronDown
iconRotation	number	180
size	lms	m
radius	xssmlxlfull	m
open	boolean	false
onToggle	() => void	—
className	string	—
style	React.CSSProperties	—
headerProps Props forwarded to the header row.	React.ComponentProps<typeof Row>	—
contentProps Props forwarded to the content column.	React.ComponentProps<typeof Column>	—
toggleOnHeaderClick Whether clicking anywhere in the header toggles the panel.	boolean	true
…and every FlexProps prop	inherited	—

Interaction

The accordion title area shows a pointer cursor, indicating it's clickable for expand/collapse.

Methods

The Accordion component exposes the following methods through a ref:

Method	Description
toggle()	Toggles the accordion between open and closed states
open()	Opens the accordion, making its content visible
close()	Closes the accordion, hiding its content