Accordion – Once UI

Accordion is a header that opens and closes the content under it. The content's height eases open and the icon turns. Closed content stays mounted, so it keeps its state. See the web Accordion for the same component in the browser.

Uncontrolled

The accordion keeps its own state. defaultOpen (or open without a handler) sets the first state.

Faq.tsx

import { Accordion, Text } from "@once-ui-system/native";

export function Faq() {
return (
  <Accordion title="How do refunds work?" defaultOpen>
    <Text onBackground="neutral-weak">Refunds reach your card within five working days.</Text>
  </Accordion>
);
}

Controlled

Pass open with onOpenChange (or onToggle) when the screen owns the state. onOpenChange is called with the next state.

Details.tsx

import { useState } from "react";
import { Accordion, Text } from "@once-ui-system/native";

export function Details() {
const [open, setOpen] = useState(false);
return (
  <Accordion title="Order details" open={open} onOpenChange={setOpen} size="l">
    <Text>Two items, shipped to Berlin.</Text>
  </Accordion>
);
}

Methods

A ref gives toggle, open and close, so another control can open the accordion.

Help.tsx

import { useRef } from "react";
import { Accordion, type AccordionHandle, Button, Column, Text } from "@once-ui-system/native";

export function Help() {
const accordion = useRef<AccordionHandle>(null);
return (
  <Column gap="12">
    <Button label="Show help" variant="secondary" onPress={() => accordion.current?.open()} />
    <Accordion ref={accordion} title="Help">
      <Text>Tap a card to see its details.</Text>
    </Accordion>
  </Column>
);
}

Differences from the web

Accordion also takes core 3.0's defaultOpen and onOpenChange.
With open and no onToggle or onOpenChange, open only sets the first state, and later changes to it are followed.
Flex props other than those listed go to the content area, as on the web.

API reference

Prop	Type	Default	Description
title	ReactNode		The header. A string is drawn as heading-strong-s. Required.
children	ReactNode		The content that opens and closes. Required.
open	boolean		The state. With onToggle or onOpenChange the caller owns it; without them, only the first state.
defaultOpen	boolean	false	Core 3.0's name for the first state when the accordion owns it.
onToggle	() => void		Called when the header is pressed or a method changes the state.
onOpenChange	(open: boolean) => void		Core 3.0's change handler, called with the next state.
icon	IconName	"chevronDown"	The icon at the end of the header.
iconRotation	number	180	Degrees the icon turns while open.
size	"s" \| "m" \| "l"	"m"	Padding of the header and content.
radius	"xs" \| "s" \| "m" \| "l" \| "xl" \| "full"	"m"	Corner radius of the pressed header.
headerProps	FlexProps		Props for the header row.
contentProps	FlexProps		Props for the content column.
toggleOnHeaderClick	boolean	true	Pressing the header toggles the content. Set false to open it only with the ref methods.
style	ViewStyle		Style for the header row.
ref	AccordionHandle		toggle(), open() and close().