Accordion

Looking for documentation on gluestack-ui v2 with NativeWind? Refer to this link.

This is an illustration of a Themed Accordion component with default configuration.

size

variant

type

isCollapsible

isDisabled

<Accordion
  m="$5"
  width="90%"
  size="md"
  variant="filled"
  type="single"
  isCollapsible={true}
  isDisabled={false}
>
  <AccordionItem value="a">
    <AccordionHeader>
      <AccordionTrigger>
        {({ isExpanded }) => {
          return (
            <>
              <AccordionTitleText>How do I place an order?</AccordionTitleText>
              {isExpanded ? (
                <AccordionIcon as={ChevronUpIcon} ml="$3" />
              ) : (
                <AccordionIcon as={ChevronDownIcon} ml="$3" />
              )}
            </>
          )
        }}
      </AccordionTrigger>
    </AccordionHeader>
    <AccordionContent>
      <AccordionContentText>
        To place an order, simply select the products you want, proceed to
        checkout, provide shipping and payment information, and finalize your
        purchase.
      </AccordionContentText>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="b">
    <AccordionHeader>
      <AccordionTrigger>
        {({ isExpanded }) => {
          return (
            <>
              <AccordionTitleText>
                What payment methods do you accept?
              </AccordionTitleText>
              {isExpanded ? (
                <AccordionIcon as={ChevronUpIcon} ml="$3" />
              ) : (
                <AccordionIcon as={ChevronDownIcon} ml="$3" />
              )}
            </>
          )
        }}
      </AccordionTrigger>
    </AccordionHeader>
    <AccordionContent>
      <AccordionContentText>
        We accept all major credit cards, including Visa, Mastercard, and
        American Express. We also support payments through PayPal.
      </AccordionContentText>
    </AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

Import

To use this component in your project, include the following import statement in your file.

import { Accordion } from '@gluestack-ui/themed';

Anatomy

The structure provided below can help you identify and understand Accordion component's various parts.

export default () => (
  <Accordion>
    <AccordionItem>
      <AccordionHeader>
        <AccordionTrigger>
          <AccordionTitleText />
          <AccordionIcon />
        </AccordionTrigger>
      </AccordionHeader>
      <AccordionContent>
        <AccordionContentText />
      </AccordionContent>
    </AccordionItem>
  </Accordion>
)

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

It inherits all the properties of React Native's View component.

Prop	Type	Default	Description
type	"single" \| "multiple"	"single"	Determines whether one or multiple items can be opened at the same time.
isCollapsible	boolean	true	When type is "single" or "multiple", allows closing content when clicking trigger for an open item.
defaultValue	string[]	[]	The value of the item to expand when initially rendered when type is "single" or "multiple".
value	string[]	[]	The controlled value of the item to expand when type is "single" or "multiple".
onValueChange	function	-	Event handler called when the expanded state of an item changes and type is "single" or "multiple".
isDisabled	boolean	false	When true, prevents the user from interacting with the accordion and all its items.

Descendants Styling Props Props to style child components.

Sx Prop	Description
_item	Prop to style the AccordionItem Component
_titleText	Prop to style the AccordionTitleText Component
_contentText	Prop to style the AccordionContentText Component
_icon	Prop to style the AccordionIcon Component

AccordionItem

Contains all the parts of a collapsible section.

Prop	Type	Default	Description
value	string	-	The controlled value of the item to expand when type is "single" or "multiple". Must be used in conjunction with onValueChange.This is a mandatory prop.
isDisabled	boolean	false	When true, prevents the user from interacting with the accordion and all its items.

AccordionHeader

Wraps an Accordion.Trigger. It inherits all the properties of @expo/html-elements's H3 on web and It inherits all the properties of react native's View on native. Use the as prop to update it to the appropriate heading level for your page.

AccordionTrigger

Toggles the collapsed state of its associated item. It inherits all the properties of react native's Pressable. It should be nested inside of an Accordion.Header.

AccordionTitleText

It inherits all the properties of React Native's Text component.

AccordionIcon

Contains all Icon related layout style props and actions.It inherits all the properties of React Native's View component.

AccordionContent

Contains all the collapsible content for an item. It inherits all the properties of React Native View component.

AccordionContentText

It inherits all the properties of React Native's Text component.

Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

We have outlined the various features that ensure the Accordion component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.

Header is h3 tag on web.
aria-expanded is "true" when the Accordion Content is visible, otherwise false.
role is set to "region" for the currently expanded accordion panel.
aria-controls points to the id of the Accordion Content.
aria-labelledby references the accordion header button that expands and collapses the region.

Keyboard Interactions

Space - When focus is on an Accordion.Trigger of a collapsed section, expands the section.
Enter - When focus is on an Accordion.Trigger of a collapsed section, expands the section.
Tab - Moves focus to the next focusable element.
Shift + Tab - Moves focus to the previous focusable element.

VoiceOver: When the Accordion Item is focused, the screen reader will announce the Accordion's title text and the state of the Accordion trigger (expanded or collapsed).

Themed

The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this link.

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Customized Component

The following example demonstrates how easily you can customize the Accordion component to suit your needs.

function App() {
  return (
    <Accordion
      width="90%"
      type="multiple"
      m="$5"
      borderWidth={1}
      shadowColor="transparent"
      borderColor="$borderLight300"
      $dark-borderColor="$borderDark700"
    >
      <AccordionItem
        value="a"
        borderBottomWidth={1}
        sx={{
          borderBottomColor: "$borderLight300",
          _dark: {
            borderBottomColor: "$borderDark700",
          },
        }}
      >
        <AccordionHeader
          sx={{
            backgroundColor: "$backgroundLight0",
            _dark: {
              backgroundColor: "$backgroundDark950",
            },
          }}
        >
          <AccordionTrigger>
            {({ isExpanded }) => {
              return (
                <>
                  <AccordionTitleText>
                    What does the "type" prop of the Accordion component do?
                  </AccordionTitleText>
                  {isExpanded ? (
                    <AccordionIcon as={ChevronUpIcon} />
                  ) : (
                    <AccordionIcon as={ChevronDownIcon} />
                  )}
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent
          mt="$0"
          pt="$2"
          sx={{
            backgroundColor: "$backgroundLight50",
            _dark: {
              backgroundColor: "$backgroundDark900",
            },
          }}
        >
          <AccordionContentText>
            The type prop determines whether one or multiple items can be opened
            at the same time. The default value is "single" which means only one
            item can be opened at a time.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem
        value="b"
        borderBottomWidth={1}
        borderBottomColor="$borderLight300"
        $dark-borderBottomColor="$borderDark700"
      >
        <AccordionHeader
          sx={{
            backgroundColor: "$backgroundLight0",
            _dark: {
              backgroundColor: "$backgroundDark950",
            },
          }}
        >
          <AccordionTrigger>
            {({ isExpanded }) => {
              return (
                <>
                  <AccordionTitleText>
                    Can I disable the whole accordion?
                  </AccordionTitleText>
                  {isExpanded ? (
                    <AccordionIcon as={ChevronUpIcon} />
                  ) : (
                    <AccordionIcon as={ChevronDownIcon} />
                  )}
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent
          mt="$0"
          pt="$2"
          sx={{
            backgroundColor: "$backgroundLight50",
            _dark: {
              backgroundColor: "$backgroundDark900",
            },
          }}
        >
          <AccordionContentText>
            Yes, you can disable the whole accordion by setting the isDisabled
            prop to true on the Accordion component.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="c">
        <AccordionHeader
          sx={{
            backgroundColor: "$backgroundLight0",
            _dark: {
              backgroundColor: "$backgroundDark950",
            },
          }}
        >
          <AccordionTrigger>
            {({ isExpanded }) => {
              return (
                <>
                  <AccordionTitleText>
                    What is a controlled accordion? How can I make it
                    controlled?
                  </AccordionTitleText>
                  {isExpanded ? (
                    <AccordionIcon as={ChevronUpIcon} />
                  ) : (
                    <AccordionIcon as={ChevronDownIcon} />
                  )}
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent
          mt="$0"
          pt="$2"
          sx={{
            backgroundColor: "$backgroundLight50",
            _dark: {
              backgroundColor: "$backgroundDark900",
            },
          }}
        >
          <AccordionContentText>
            Controlled components refer to the components where the state and
            behaviors are controlled by the Parent component. You can make the
            accordion a controlled component by passing the value prop to the
            Accordion component and setting the onValueChange prop to update the
            value prop. Refer to the controlled accordion example in the docs.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Rounded corners

The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components.

function App() {
  return (
    <Accordion m="$5" width="80%" maxWidth={640} shadowColor="transparent">
      <AccordionItem value="item-1" borderRadius="$lg">
        <AccordionHeader>
          <AccordionTrigger
            sx={{
              ":focusVisible": {
                borderRadius: "$lg",
              },
            }}
          >
            {({ isExpanded }) => {
              return (
                <>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} mr="$3" />
                  ) : (
                    <AccordionIcon as={PlusIcon} mr="$3" />
                  )}
                  <AccordionTitleText>
                    How do I place an order?
                  </AccordionTitleText>
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent ml="$9">
          <AccordionContentText>
            To place an order, simply select the products you want, proceed to
            checkout, provide shipping and payment information, and finalize
            your purchase.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2" mt="$5" borderRadius="$lg">
        <AccordionHeader>
          <AccordionTrigger
            sx={{
              ":focusVisible": {
                borderRadius: "$lg",
              },
            }}
          >
            {({ isExpanded }) => {
              return (
                <>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} mr="$3" />
                  ) : (
                    <AccordionIcon as={PlusIcon} mr="$3" />
                  )}
                  <AccordionTitleText>
                    What payment methods do you accept?
                  </AccordionTitleText>
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent ml="$9">
          <AccordionContentText>
            We accept all major credit cards, including Visa, Mastercard, and
            American Express. We also support payments through PayPal.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Disabled item

You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component.

function App() {
  return (
    <Accordion m="$5" variant="unfilled" width="90%">
      <AccordionItem
        value="item-1"
        isDisabled={true}
        borderBottomWidth={1}
        borderColor="$borderLight300"
        $dark-borderColor="$borderDark700"
      >
        <AccordionHeader>
          <AccordionTrigger>
            {({ isExpanded }) => {
              return (
                <>
                  <AccordionTitleText>Disabled Item</AccordionTitleText>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} />
                  ) : (
                    <AccordionIcon as={PlusIcon} />
                  )}
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          <AccordionContentText>This is a Disabled Item.</AccordionContentText>
        </AccordionContent>
      </AccordionItem>

      <AccordionItem value="item-2">
        <AccordionHeader>
          <AccordionTrigger>
            {({ isExpanded }) => {
              return (
                <>
                  <AccordionTitleText>
                    Is this accordion accessible?
                  </AccordionTitleText>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} />
                  ) : (
                    <AccordionIcon as={PlusIcon} />
                  )}
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          <AccordionContentText>
            Yes, the accordion is accessible. It adheres to the WAI-ARIA design
            pattern. You can read more about it in the accessibility section of
            the docs.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Default value

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

function App() {
  return (
    <Accordion
      m="$5"
      variant="unfilled"
      type="single"
      defaultValue="item-3"
      width="90%"
    >
      <AccordionItem value="item-1" borderRadius="$lg">
        <AccordionHeader>
          <AccordionTrigger>
            {({ isExpanded }) => {
              return (
                <>
                  <AccordionTitleText>
                    What is the defaultValue prop of the Accordion component?
                  </AccordionTitleText>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} />
                  ) : (
                    <AccordionIcon as={PlusIcon} />
                  )}
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          <AccordionContentText>
            The defaultValue prop of the Accordion component is used to define
            the open item by default. It is used when the Accordion component is
            uncontrolled.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>
      <Divider />
      <AccordionItem value="item-2" borderRadius="$lg">
        <AccordionHeader>
          <AccordionTrigger>
            {({ isExpanded }) => {
              return (
                <>
                  <AccordionTitleText>
                    How many size variants does the Accordion component have?
                  </AccordionTitleText>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} />
                  ) : (
                    <AccordionIcon as={PlusIcon} />
                  )}
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          <AccordionContentText>
            The Accordion component has three size variants - sm, md and lg.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>
      <Divider />
      <AccordionItem value="item-3" borderRadius="$lg">
        <AccordionHeader>
          <AccordionTrigger>
            {({ isExpanded }) => {
              return (
                <>
                  <AccordionTitleText>
                    Can I nest my accordions?
                  </AccordionTitleText>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} />
                  ) : (
                    <AccordionIcon as={PlusIcon} />
                  )}
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          <AccordionContentText>
            Yes, you can nest your accordions. Refer to the nested accordion
            example in the docs.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Nested Components

You can nest Accordion components to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region.

function App() {
  return (
    <Accordion
      variant="unfilled"
      size="sm"
      m="$5"
      borderWidth={1}
      borderColor="$borderLight300"
      $dark-borderColor="$borderDark700"
      width="80%"
      maxWidth={640}
    >
      <AccordionItem value="a">
        <AccordionHeader
          sx={{
            backgroundColor: "$backgroundLight0",
            _dark: {
              backgroundColor: "$backgroundDark950",
            },
          }}
        >
          <AccordionTrigger>
            {({ isExpanded }) => (
              <>
                {isExpanded ? (
                  <AccordionIcon as={MinusIcon} />
                ) : (
                  <AccordionIcon as={PlusIcon} />
                )}
                <AccordionTitleText ml="$3">USA</AccordionTitleText>
              </>
            )}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent pb="$0">
          <Accordion
            width="100%"
            shadowColor="transparent"
            borderWidth={1}
            sx={{
              borderColor: "$borderLight300",
              backgroundColor: "$backgroundLight0",
              _dark: {
                borderColor: "$borderDark700",
                backgroundColor: "$backgroundDark950",
              },
            }}
          >
            <AccordionItem value="b">
              <AccordionHeader>
                <AccordionTrigger>
                  {({ isExpanded }) => (
                    <>
                      {isExpanded ? (
                        <AccordionIcon as={MinusIcon} />
                      ) : (
                        <AccordionIcon as={PlusIcon} />
                      )}
                      <AccordionTitleText ml="$3">
                        California
                      </AccordionTitleText>
                    </>
                  )}
                </AccordionTrigger>
              </AccordionHeader>
              <AccordionContent>
                <AccordionContentText>
                  Capital city of California is Sacramento. California has a GDP
                  of 2.89 trillion dollars and follows Pacific Standard Time
                  zone.
                </AccordionContentText>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
          <Accordion
            width="100%"
            shadowColor="transparent"
            mt="$5"
            sx={{
              backgroundColor: "$backgroundLight0",
              _dark: {
                backgroundColor: "$backgroundDark950",
              },
            }}
          >
            <AccordionItem value="c">
              <AccordionHeader>
                <AccordionTrigger>
                  {({ isExpanded }) => (
                    <>
                      {isExpanded ? (
                        <AccordionIcon as={MinusIcon} />
                      ) : (
                        <AccordionIcon as={PlusIcon} />
                      )}
                      <AccordionTitleText ml="$3">Nevada</AccordionTitleText>
                    </>
                  )}
                </AccordionTrigger>
              </AccordionHeader>
              <AccordionContent>
                <AccordionContentText>
                  Nevada is located in a mountainous region that includes vast
                  semiarid grasslands and sandy alkali deserts. It is the most
                  arid state of the country.
                </AccordionContentText>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Controlled Accordion

A component is controlled when it's managed by its parent using props. You can make the Accordion component controlled by passing the value prop to the Accordion and setting the onValueChange to update the value prop. In the following example, we have created a controlled accordion to display the expanded state of the accordion.

function App() {
  const [selectedValues, setSelectedValues] = React.useState([
    "item-1",
    "item-2",
  ])
  return (
    <Accordion
      m="$5"
      variant="unfilled"
      width="95%"
      type="multiple"
      value={selectedValues}
      onValueChange={(item) => setSelectedValues(item)}
    >
      <AccordionItem
        value="item-1"
        borderTopWidth={1}
        borderBottomWidth={1}
        sx={{
          borderColor: "$borderLight300",
          _dark: {
            borderColor: "$borderDark700",
          },
        }}
      >
        <AccordionHeader>
          <AccordionTrigger>
            {({ isExpanded }) => {
              return (
                <>
                  <AccordionTitleText>
                    Exploring Nature's Wonders
                  </AccordionTitleText>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} />
                  ) : (
                    <AccordionIcon as={PlusIcon} />
                  )}
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          <AccordionContentText>
            Embark on a journey through the breathtaking landscapes and diverse
            ecosystems of our planet. From majestic mountains to serene oceans,
            discover the beauty that nature has to offer.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>

      <AccordionItem value="item-2">
        <AccordionHeader>
          <AccordionTrigger>
            {({ isExpanded }) => {
              return (
                <>
                  <AccordionTitleText>
                    The Art of Culinary Delights
                  </AccordionTitleText>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} />
                  ) : (
                    <AccordionIcon as={PlusIcon} />
                  )}
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          <AccordionContentText>
            Indulge your senses in a culinary adventure. Uncover the secrets
            behind delectable dishes, learn about unique flavor profiles, and
            ignite your passion for cooking.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem
        value="item-3"
        borderTopWidth={1}
        borderBottomWidth={1}
        sx={{
          borderColor: "$borderLight300",
          _dark: {
            borderColor: "$borderDark700",
          },
        }}
      >
        <AccordionHeader>
          <AccordionTrigger>
            {({ isExpanded }) => {
              return (
                <>
                  <AccordionTitleText>
                    Mastering the Creative Process
                  </AccordionTitleText>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} />
                  ) : (
                    <AccordionIcon as={PlusIcon} />
                  )}
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          <AccordionContentText>
            Immerse yourself in the world of creativity. Unleash your artistic
            potential, whether it's through writing, painting, or any other form
            of expression.
          </AccordionContentText>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Unstyled

We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.