Accordion

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.
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).
A universal React Native UI kit for iOS, Android, and the web.
iOS
A universal React Native UI kit for iOS, Android, and the web.
Android
A universal React Native UI kit for iOS, Android, and the web.
Web
tsx
<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"
/>

Props

Prop
Description
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
Allow more than one panel open at once (default: single-open).
card
boolean
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
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.

Do & Don’t

Peer sections

Don’t
...
...
Don't leave every panel open by default in single-open mode; the closed-by-default disclosure is the point of an accordion.
Do
Free 2-day shipping on orders over $50.
Keep one disclosure group for a set of related, peer sections, and let the chevron carry the open/closed affordance.
← View
ActionPanel →