AccordionGroup – Once UI

A container component that groups multiple Accordion components together with consistent styling and dividers between each item. It's useful for creating FAQ sections, navigation menus, and other grouped collapsible content.

AccordionGroup applies smart border-radius: the first item gets top-radius, the last item gets bottom-radius, and middle items have no radius — creating a cohesive grouped appearance.

AccordionGroup

First item

Second item

Third item

<AccordionGroup
  items={[
    {
      title: "First Item",
      content:
        <Text onBackground="neutral-weak">
          Content for the first item
        </Text>
    },
    {
      title: "Second Item",
      content:
        <Text onBackground="neutral-weak">
          Content for the second item
        </Text>
    },
    {
      title: "Third Item",
      content:
        <Text onBackground="neutral-weak">
          Content for the third item
        </Text>
    }
  ]}
/>

Title style

titleVariant sets every item's title style; the default is heading-strong-s.

Title style

Can I cancel?

Do you offer refunds?

<AccordionGroup
titleVariant="body-strong-m"
items={[
  { title: "Can I cancel?", content: <Text onBackground="neutral-weak">Any time, from settings.</Text> },
  { title: "Do you offer refunds?", content: <Text onBackground="neutral-weak">Within 30 days.</Text> }
]}
/>

API reference

	Type	Default
itemsrequired	AccordionItem[]	—
size	lms	m
autoCollapse Close the open item when another one is opened.	boolean	true
titleVariant Text style of every item's title.	TextVariant	—
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—

AccordionItem

	Type	Default
title	ReactNode	—
content	ReactNode	—
headerProps	FlexProps	—