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>

Title style

The title is set in heading-strong-s by default. titleVariant takes any text variant, for a FAQ that reads as body copy; radius="none" squares the header for a flush layout.

Title style

How long does shipping take?

<Accordion title="How long does shipping take?" titleVariant="body-default-m" radius="none">
<Text onBackground="neutral-weak">Two working days in the EU.</Text>
</Accordion>

API reference

	Type	Default
titlerequired	React.ReactNode	—
children	React.ReactNode	—
icon	IconName	chevronDown
iconRotation	number	180
size	lms	m
radius Corner radius of the header; none for square corners.	xllmsxsnonefull	m
titleVariant Text style of the title.	TextVariant	heading-strong-s
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