GitHub
wwwwwwwwwwwwwwwwwww

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.

    • Header

    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 .

    Previous

    Toast

    Next

    Group

    Edit this page on GitHub.