Accordion

Molecule
A vertically stacked group of disclosure rows: each items entry is a header (its title plus a chevron that rotates when the row opens) over a collapsible content panel.
src/molecules/accordion
View in Surfaces & data

Playground

Every control sets a real prop of AccordionProps. The JSX below updates as you go.
A universal React Native UI kit for iOS, Android, and the web.
Props
multiple
boolean
card
boolean
disabled
boolean
JSX · AccordionProps
<Accordion card />

Variants

6 examples from src/molecules/accordion/accordion.md, each rendered live from its own JSX.
Manage your plan, payment method, and invoices.
Two-factor authentication and active sessions.
Multiple open
<Accordion
multiple
items={[
{ key: "billing", title: "Billing", content: "Manage your plan, payment method, and invoices." },
{ key: "team", title: "Team", content: "Invite teammates and set their roles." },
{ key: "security", title: "Security", content: "Two-factor authentication and active sessions." }
]}
defaultValue={["billing", "security"]}
/>
Free 2-day shipping on orders over $50.
Card surface
card gives the group an outlined card container with inset headers and content on web and Android. On iOS the default Accordion already renders as the inset-grouped card, so card changes nothing there (a documented no-op).
<Accordion
card
items={[
{ key: "ship", title: "Shipping", content: "Free 2-day shipping on orders over $50." },
{ key: "return", title: "Returns", content: "30-day returns, no questions asked." },
{ key: "warranty", title: "Warranty", content: "Two years, parts and labor." }
]}
defaultValue="ship"
/>
Manage your plan, payment method, and invoices.
With descriptions
<Accordion
items={[
{ key: "billing", title: "Billing", description: "Plan, payment method, invoices.", content: "Manage your plan, payment method, and invoices." },
{ key: "team", title: "Team", description: "Members and roles.", content: "Invite teammates and set their roles." },
{ key: "security", title: "Security", description: "2FA and sessions.", content: "Two-factor authentication and active sessions." }
]}
defaultValue="billing"
/>
Workspace name, language, and time zone.
Disabled row
<Accordion
items={[
{ key: "general", title: "General", content: "Workspace name, language, and time zone." },
{ key: "advanced", title: "Advanced (coming soon)", content: "Not available yet.", disabled: true },
{ key: "danger", title: "Danger zone", content: "Delete this workspace permanently." }
]}
defaultValue="general"
/>
Link your data source.
Controlled
Drive the open step from outside the accordion: a parent owns the active step and passes it as value, so the group reflects that external state rather than toggling on a header press. Here the Next step button is the trigger. (Stateful is a docs-only helper standing in for your own state; in an app you would hold step with useState and pass value={step} plus onValueChange if you also want header presses to update it.)
<Stateful initial="step-1">
{(step, setStep) => (
<Column relaxed>
<Button small outline onPress={() => setStep(step === "step-1" ? "step-2" : step === "step-2" ? "step-3" : "step-1")}>Next step</Button>
<Accordion
value={step}
items={[
{ key: "step-1", title: "Step 1: Connect", content: "Link your data source." },
{ key: "step-2", title: "Step 2: Map", content: "Map the incoming fields." },
{ key: "step-3", title: "Step 3: Review", content: "Confirm and import." }
]}
/>
</Column>
)}
</Stateful>
Trace complete
Activity disclosure
activity retains the original Argus run surface, instant trace reveal, dense header and 180-degree chevron transition. compact keeps the original phone insets. renderHeader arranges domain content inside the component-owned trigger; the supplied indicator carries the controlled disclosure state. Put nested actions in that header as Canvas controls so they retain independent targets.
<Accordion activity items={[{ key: "run", title: "Scout run", content: "Trace complete" }]} defaultValue="run" />

States

Hover, focus and press are pinned so they can be compared side by side; the rest are real props.
A universal React Native UI kit for iOS, Android, and the web.
default
A universal React Native UI kit for iOS, Android, and the web.
hover
A universal React Native UI kit for iOS, Android, and the web.
focus

Anatomy

A universal React Native UI kit for iOS, Android, and the web.
1
Item
2
Header
3
Chevron
4
Panel
Dimmed parts appear only in some states or variants.

Props

12 props on AccordionProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
12 props
activity
boolean
false
Original Argus run disclosure surface, header and trace insets.
compact
boolean
false
Compact activity header and trace indentation.
renderHeader
(item: AccordionItem, expanded: boolean, indicator: ReactNode) => ReactNode
–
Activity header content; the Accordion owns its trigger and indicator.
items
AccordionItem[]
–
The disclosure rows, top to bottom.
value
string | string[]
–
Controlled open state. A single key in single-open mode, an array of keys in multiple mode. Pair with onValueChange. Omit for uncontrolled.
defaultValue
string | string[]
–
Initial open state for the uncontrolled case (read once).
onValueChange
(value: string | string[]) => void
–
Called with the next open value whenever a header toggles.
multiple
boolean
false
Allow more than one panel open at once (default: single-open).
card
boolean
false
Card surface: wraps the group in an outlined card container with inset headers and content (web/Android). On iOS the default Accordion already renders as the inset-grouped card, so card is a no-op there.
disabled
boolean
false
Disable the whole group (every row stops toggling and dims).
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard
Enter
Space
Expands or collapses
ArrowUp
ArrowDown
Moves between headers
Home
End
First · last header
Semantics
Roles
button
States
disabled
expanded
ARIA on web
aria-expanded

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Manage your plan, payment method, and invoices.
Two-factor authentication and active sessions.
Web
control 10 · field 10 · card 16 · Instrument Sans
Manage your plan, payment method, and invoices.
Two-factor authentication and active sessions.
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Manage your plan, payment method, and invoices.
Two-factor authentication and active sessions.
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Accordion
items={[
{ key: "what", title: "What is Canvas?", content: "A universal React Native UI kit for iOS, Android, and the web." },
{ key: "access", title: "Is it accessible?", content: "Yes. Each header is a button that exposes its expanded state." },
{ key: "theme", title: "Is it themed?", content: "Yes. Every color comes from the active theme tokens." }
]}
defaultValue="what"
/>
Single-open by default (opening one row closes the others); pass multiple to let any number stay open. Open state is controlled (value + onValueChange) or uncontrolled (defaultValue). An item's description adds a muted secondary line under its title; card wraps the whole group in an outlined card surface on web and Android (on iOS the default look already is the inset-grouped card, so card is a no-op there).

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--ln
--sf
--tx2
--tx3

Related components