Accordion

A vertically stacked set of interactive headings that each reveal an associated section of content

import { ChevronDown } from '@tamagui/lucide-icons'
import { Accordion, Paragraph, Square } from 'tamagui'
export function AccordionDemo() {
return (
<Accordion overflow="hidden" width="$20" type="multiple">
<Accordion.Item value="a1">
<Accordion.Trigger flexDirection="row" justifyContent="space-between">
{({
open,
}: {
open: boolean
}) => (
<>
<Paragraph>1. Take a cold shower</Paragraph>
<Square animation="quick" rotate={open ? '180deg' : '0deg'}>
<ChevronDown size="$1" />
</Square>
</>
)}
</Accordion.Trigger>
<Accordion.HeightAnimator animation="medium">
<Accordion.Content animation="medium" exitStyle={{ opacity: 0 }}>
<Paragraph>
Cold showers can help reduce inflammation, relieve pain, improve
circulation, lower stress levels, and reduce muscle soreness and fatigue.
</Paragraph>
</Accordion.Content>
</Accordion.HeightAnimator>
</Accordion.Item>
<Accordion.Item value="a2">
<Accordion.Trigger flexDirection="row" justifyContent="space-between">
{({
open,
}: {
open: boolean
}) => (
<>
<Paragraph>2. Eat 4 eggs</Paragraph>
<Square animation="quick" rotate={open ? '180deg' : '0deg'}>
<ChevronDown size="$1" />
</Square>
</>
)}
</Accordion.Trigger>
<Accordion.HeightAnimator animation="medium">
<Accordion.Content animation="medium" exitStyle={{ opacity: 0 }}>
<Paragraph>
Eggs have been a dietary staple since time immemorial and there’s good
reason for their continued presence in our menus and meals.
</Paragraph>
</Accordion.Content>
</Accordion.HeightAnimator>
</Accordion.Item>
</Accordion>
)
}

Features

  • Full keyboard navigation.

  • Can expand one or multiple items.

  • Can be controlled or uncontrolled.

Installation

Accordion is already installed in tamagui, or you can install it independently:

yarn add @tamagui/accordion

Anatomy

Import all parts and piece them together.

import { Accordion } from 'tamagui';
export default () => (
<Accordion>
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger />
</Accordion.Header>
<Accordion.Content />
</Accordion.Item>
</Accordion>
)

API Reference

Accordion

Contains all the parts of an accordion.

Props

  • asChild

    boolean

    Default: 

    false

    Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

  • type (required)

    "single" | "multiple"

    Determines whether one or multiple items can be opened at the same time.

  • value

    string

    The controlled value of the item to expand when type is "single". Must be used in conjunction with onValueChange.

  • defaultValue

    string

    The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state of the items.

  • onValueChange

    (value: string) => void

    Event handler called when the expanded state of an item changes and type is "single".

  • value

    string[]

    Default: 

    []

    The controlled value of the item to expand when type is "multiple". Must be used in conjunction with onValueChange.

  • defaultValue

    string[]

    Default: 

    []

    The value of the item to expand when initially rendered when type is "multiple". Use when you do not need to control the state of the items.

  • onValueChange

    (value: string[]) => void

    Event handler called when the expanded state of an item changes and type is "multiple".

  • collapsible

    boolean

    Default: 

    false

    When type is "single", allows closing content when clicking trigger for an open item.

  • disabled

    boolean

    Default: 

    false

    When true, prevents the user from interacting with the accordion and all its items.

  • dir

    "ltr" | "rtl"

    Default: 

    "ltr"

    The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.

  • Item

    Contains all the parts of a collapsible section.

    Props

  • asChild

    boolean

    Default: 

    false

    Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

  • disabled

    boolean

    Default: 

    false

    When true, prevents the user from interacting with the item.

  • value (required)

    string

    A unique value for the item.

  • Wraps an Accordion.Trigger. Use the asChild prop to update it to the appropriate heading level for your page.

    Props

  • asChild

    boolean

    Default: 

    false

    Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

  • Trigger

    Toggles the collapsed state of its associated item. It should be nested inside of an Accordion.Header.

    Props

  • asChild

    boolean

    Default: 

    false

    Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

  • Content

    Contains the collapsible content for an item.

    Props

  • asChild

    boolean

    Default: 

    false

    Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

  • forceMount

    boolean

    Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

  • Examples

    Expanded by default

    Use the defaultValue prop to define the open item by default.

    <Accordion type="single" defaultValue="item-2">
    <Accordion.Item value="item-1"></Accordion.Item>
    <Accordion.Item value="item-2"></Accordion.Item>
    </Accordion>

    Allow collapsing all items

    Use the collapsible prop to allow all items to close.

    <Accordion type="single" collapsible>
    <Accordion.Item value="item-1"></Accordion.Item>
    <Accordion.Item value="item-2"></Accordion.Item>
    </Accordion>

    Multiple items open at the same time

    Set the type prop to multiple to enable opening multiple items at once.

    <Accordion type="multiple">
    <Accordion.Item value="item-1"></Accordion.Item>
    <Accordion.Item value="item-2"></Accordion.Item>
    </Accordion>

    Accessibility

    Adheres to the Accordion WAI-ARIA design pattern .