Accordion

Help

Frequently asked

How long does shipping take?

Orders ship within 2 business days. Delivery takes 3–5 days in Europe and 5–8 days elsewhere. You’ll get a tracking link by email.

Can I return an item?

Do you ship internationally?

Gift cards

Soon

Installation

npx axiom add accordion

pnpm dlx axiom add accordion

yarn dlx axiom add accordion

bun x axiom add accordion

Installs: react-native-reanimated, react-native-worklets.

Requires the chevron-down icon in your icon registry. Open sections, measuring and the height animation live in use-accordion.ts, shared by every styling variant.

Usage

import { Accordion } from "@/components/ui/accordion";
import { Separator } from "@/components/ui/separator";

<Accordion type="single" collapsible>
	<Accordion.Item value="shipping">
		<Accordion.Trigger>Shipping</Accordion.Trigger>
		<Accordion.Content>Orders ship within 2 days.</Accordion.Content>
	</Accordion.Item>
	<Separator />
	<Accordion.Item value="returns">
		<Accordion.Trigger>Returns</Accordion.Trigger>
		<Accordion.Content>Free returns within 30 days.</Accordion.Content>
	</Accordion.Item>
</Accordion>;

The accordion draws no line on its own: put a Separator between two sections where you want one, and leave it out where you don’t.

Props

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	`single`: opening a section closes the others. `multiple`: several sections can stay open.
`value`	`string \| string[]`	—	Open section(s): a string for `single`, an array for `multiple`.
`defaultValue`	`string \| string[]`	—	Initially open section(s) when the accordion manages its own state.
`onValueChange`	`(value) => void`	—	Called when a section opens or closes.
`collapsible`	`boolean`	`true`	With `type="single"`, lets the user close the open section. `false` always keeps one open.
`disabled`	`boolean`	`false`	Disables every section.
`children`	`ReactNode`	—	`Accordion.Item` elements, with a `Separator` where you want a line.
`style`	`StyleProp<ViewStyle>`	—	Extra styles.

Accordion.Item

Prop	Type	Default	Description
`value`	`string`	—	Required. Identifies the section.
`disabled`	`boolean`	`false`	Keeps this section closed and dims its trigger.
`style`	`StyleProp<ViewStyle>`	—	Extra styles.

Accordion.Trigger

Prop	Type	Default	Description
`children`	`ReactNode`	—	The section title.
`icon`	`ReactNode \| null`	chevron	Indicator on the right, rotated when open. `null` hides it.
`leading`	`ReactNode`	—	Content before the title, such as an icon.
`style`	`StyleProp<ViewStyle>`	—	Extra styles.

The trigger sets accessibilityRole="button" and accessibilityState.expanded.

Accordion.Content

Prop	Type	Default	Description
`children`	`ReactNode`	—	The section body. It is measured once, then its height animates on the UI thread.
`forceMount`	`boolean`	`false`	Keeps the content mounted while closed, to preserve its state (a form, a video position).
`style`	`StyleProp<ViewStyle>`	—	Extra styles.

Use cases

FAQ

type="single" so the screen doesn’t turn into a wall of open answers.

What is Axiom?

Is it free?

Yes. The code is copied into your project and you own it. There is no runtime package to pay for.

Does it work with Expo?

<Accordion type="single" collapsible>
	{faq.map((q, index) => (
		<Fragment key={q.id}>
			{index > 0 ? <Separator /> : null}
			<Accordion.Item value={q.id}>
				<Accordion.Trigger>{q.question}</Accordion.Trigger>
				<Accordion.Content>
					<Text color="muted">{q.answer}</Text>
				</Accordion.Content>
			</Accordion.Item>
		</Fragment>
	))}
</Accordion>

Order details

type="multiple" for sections the user compares, with a summary in the trigger.

Order #10482

3 items

$88.90

Canvas tote × 1$32.00

Cold brew × 2$9.00

Notebook × 1$43.00

Delivery

Tomorrow

221B Baker Street, London NW1 6XE

<Accordion type="multiple" defaultValue={["items"]}>
	<Accordion.Item value="items">
		<Accordion.Trigger leading={<Icon name="bag" />}>
			3 items
		</Accordion.Trigger>
		<Accordion.Content>{/* lines */}</Accordion.Content>
	</Accordion.Item>
	<Separator />
	<Accordion.Item value="delivery">…</Accordion.Item>
</Accordion>

Advanced options in a form

Keep rare settings out of the way. forceMount keeps what the user typed if they close the section.

Project name

axiom-demo

Advanced

New Architecture

Bundle identifier

dev.axiom.demo

Create project

<Accordion type="single" collapsible>
  <Accordion.Item value="advanced">
    <Accordion.Trigger>Advanced</Accordion.Trigger>
    <Accordion.Content forceMount>
      <Switch … />
      <Field>
        <Field.Label>Bundle identifier</Field.Label>
        <Input … />
      </Field>
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Item

Accordion

On this page