Accordion

Efficiently organize and present content in a compact, interactive interface.

Installation

API Reference

Important Note

This is the documentation for gluestack-ui v2 (beta). For @gluestack-ui/themed (stable) documentation, refer to gluestack-ui v1.

This is an illustration of Accordion component.

size

variant

type

isCollapsible

isDisabled

<Accordion
  size="md"
  variant="filled"
  type="single"
  isCollapsible={true}
  isDisabled={false}
  className="m-5 w-[90%] border border-outline-200"
>
  <AccordionItem value="a">
    <AccordionHeader>
      <AccordionTrigger>
        {({ isExpanded }) => {
          return (
            <>
              <AccordionTitleText>How do I place an order?</AccordionTitleText>
              {isExpanded ? (
                <AccordionIcon as={ChevronUpIcon} className="ml-3" />
              ) : (
                <AccordionIcon as={ChevronDownIcon} className="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>
  <Divider />
  <AccordionItem value="b">
    <AccordionHeader>
      <AccordionTrigger>
        {({ isExpanded }) => {
          return (
            <>
              <AccordionTitleText>
                What payment methods do you accept?
              </AccordionTitleText>
              {isExpanded ? (
                <AccordionIcon as={ChevronUpIcon} className="ml-3" />
              ) : (
                <AccordionIcon as={ChevronDownIcon} className="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>

Installation

CLI

Manual

Run the following command:

npx gluestack-ui add accordion

Step 1: Install the following dependencies:

npm i @gluestack-ui/accordion @expo/html-elements

Step 2: Copy and paste the following code into your project.

"use client"
import React, { useMemo } from "react"
import { createAccordion } from "@gluestack-ui/accordion"
import { Svg } from "react-native-svg"
import { View, Pressable, Text, Platform, TextProps } from "react-native"
import { tva } from "@gluestack-ui/nativewind-utils/tva"
import type { VariantProps } from "@gluestack-ui/nativewind-utils"
import {
  withStyleContext,
  useStyleContext,
} from "@gluestack-ui/nativewind-utils/withStyleContext"
import { withStyleContextAndStates } from "@gluestack-ui/nativewind-utils/withStyleContextAndStates"
import { H3 } from "@expo/html-elements"
import { cssInterop } from "nativewind"

const SCOPE = "ACCORDION"
/** Styles */

const accordionStyle = tva({
  base: "w-full",
  variants: {
    variant: {
      filled: "bg-white shadow-hard-2",
      unfilled: "",
    },
    size: {
      sm: "",
      md: "",
      lg: "",
    },
  },
})
const accordionItemStyle = tva({
  parentVariants: {
    variant: {
      filled: "bg-background-0",
      unfilled: "bg-transparent",
    },
  },
})
const accordionTitleTextStyle = tva({
  base: "text-typography-900 font-bold flex-1 text-left",
  parentVariants: {
    size: {
      sm: "text-sm",
      md: "text-base",
      lg: "text-lg",
    },
  },
})
const accordionIconStyle = tva({
  base: "text-typography-900 fill-none",
  parentVariants: {
    size: {
      "2xs": "h-3 w-3",
      xs: "h-3.5 w-3.5",
      sm: "h-4 w-4",
      md: "h-[18px] w-[18px]",
      lg: "h-5 w-5",
      xl: "h-6 w-6",
    },
  },
})
const accordionContentTextStyle = tva({
  base: "text-typography-700 font-normal",
  parentVariants: {
    size: {
      sm: "text-sm ",
      md: "text-base",
      lg: "text-lg",
    },
  },
})
const accordionHeaderStyle = tva({
  base: "mx-0 my-0",
})
const accordionContentStyle = tva({
  base: "px-5 mt-2 pb-5",
})
const accordionTriggerStyle = tva({
  base: "w-full py-5 px-5 flex-row justify-between items-center web:outline-none focus:outline-none data-[disabled=true]:opacity-40 data-[disabled=true]:cursor-not-allowed data-[focus-visible=true]:bg-background-50",
})

type IPrimitiveIcon = {
  height?: number | string
  width?: number | string
  fill?: string
  color?: string
  size?: number | string
  stroke?: string
  as?: React.ElementType
  className?: string
  classNameColor?: string
}

const PrimitiveIcon = React.forwardRef<
  React.ElementRef<typeof Svg>,
  IPrimitiveIcon
>(
  (
    {
      height,
      width,
      fill,
      color,
      classNameColor,
      size,
      stroke = "currentColor",
      as: AsComp,
      ...props
    },
    ref
  ) => {
    color = color ?? classNameColor
    const sizeProps = useMemo(() => {
      if (size) return { size }
      if (height && width) return { height, width }
      if (height) return { height }
      if (width) return { width }
      return {}
    }, [size, height, width])

    let colorProps = {}
    if (fill) {
      colorProps = { ...colorProps, fill: fill }
    }
    if (stroke !== "currentColor") {
      colorProps = { ...colorProps, stroke: stroke }
    } else if (stroke === "currentColor" && color !== undefined) {
      colorProps = { ...colorProps, stroke: color }
    }

    if (AsComp) {
      return <AsComp ref={ref} {...props} {...sizeProps} {...colorProps} />
    }
    return (
      <Svg ref={ref} height={height} width={width} {...colorProps} {...props} />
    )
  }
)

const Root =
  Platform.OS === "web"
    ? withStyleContext(View, SCOPE)
    : withStyleContextAndStates(View, SCOPE)

const Header = (
  Platform.OS === "web" ? H3 : View
) as React.ComponentType<TextProps>

/** Creator */
const UIAccordion = createAccordion({
  Root: Root,
  Item: View,
  Header: Header,
  Trigger: Pressable,
  Icon: PrimitiveIcon,
  TitleText: Text,
  ContentText: Text,
  Content: View,
})

cssInterop(UIAccordion, { className: "style" })
cssInterop(UIAccordion.Item, { className: "style" })
cssInterop(UIAccordion.Header, { className: "style" })
cssInterop(UIAccordion.Trigger, { className: "style" })
//@ts-ignore
cssInterop(UIAccordion.Icon, { className: "style" })
cssInterop(UIAccordion.TitleText, { className: "style" })
cssInterop(UIAccordion.Content, { className: "style" })
cssInterop(UIAccordion.ContentText, { className: "style" })
// @ts-ignore
cssInterop(UIAccordion.Icon, {
  className: {
    target: "style",
    nativeStyleToProp: {
      height: true,
      width: true,
      fill: true,
      color: "classNameColor",
      stroke: true,
    },
  },
})

type IAccordionProps = React.ComponentPropsWithoutRef<typeof UIAccordion> &
  VariantProps<typeof accordionStyle>

type IAccordionItemProps = React.ComponentPropsWithoutRef<
  typeof UIAccordion.Item
> &
  VariantProps<typeof accordionItemStyle>

type IAccordionContentProps = React.ComponentPropsWithoutRef<
  typeof UIAccordion.Content
> &
  VariantProps<typeof accordionContentStyle>

type IAccordionContentTextProps = React.ComponentPropsWithoutRef<
  typeof UIAccordion.ContentText
> &
  VariantProps<typeof accordionContentTextStyle>

type IAccordionIconProps = VariantProps<typeof accordionIconStyle> &
  React.ComponentPropsWithoutRef<typeof UIAccordion.Icon> & {
    as?: React.ElementType
  }

type IAccordionHeaderProps = React.ComponentPropsWithoutRef<
  typeof UIAccordion.Header
> &
  VariantProps<typeof accordionHeaderStyle>

type IAccordionTriggerProps = React.ComponentPropsWithoutRef<
  typeof UIAccordion.Trigger
> &
  VariantProps<typeof accordionTriggerStyle>

type IAccordionTitleTextProps = React.ComponentPropsWithoutRef<
  typeof UIAccordion.TitleText
> &
  VariantProps<typeof accordionTitleTextStyle>

/** Components */

const Accordion = React.forwardRef<
  React.ElementRef<typeof UIAccordion>,
  IAccordionProps
>(({ className, variant = "filled", size = "md", ...props }, ref) => {
  return (
    <UIAccordion
      ref={ref}
      {...props}
      className={accordionStyle({ variant, class: className })}
      context={{ variant, size }}
    />
  )
})

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof UIAccordion.Item>,
  IAccordionItemProps
>(({ className, ...props }, ref) => {
  const { variant } = useStyleContext(SCOPE)
  return (
    <UIAccordion.Item
      ref={ref}
      {...props}
      className={accordionItemStyle({
        parentVariants: { variant },
        class: className,
      })}
    />
  )
})

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof UIAccordion.Content>,
  IAccordionContentProps
>(({ className, ...props }, ref) => {
  return (
    <UIAccordion.Content
      ref={ref}
      {...props}
      className={accordionContentStyle({
        class: className,
      })}
    />
  )
})

const AccordionContentText = React.forwardRef<
  React.ElementRef<typeof UIAccordion.ContentText>,
  IAccordionContentTextProps
>(({ className, ...props }, ref) => {
  const { size } = useStyleContext(SCOPE)
  return (
    <UIAccordion.ContentText
      ref={ref}
      {...props}
      className={accordionContentTextStyle({
        parentVariants: { size },
        class: className,
      })}
    />
  )
})

const AccordionIcon = React.forwardRef<
  React.ElementRef<typeof UIAccordion.Icon>,
  IAccordionIconProps
>(({ size, className, ...props }, ref) => {
  const { size: parentSize } = useStyleContext(SCOPE)

  if (typeof size === "number") {
    return (
      <UIAccordion.Icon
        ref={ref}
        {...props}
        className={accordionIconStyle({ class: className })}
        size={size}
      />
    )
  } else if (
    (props.height !== undefined || props.width !== undefined) &&
    size === undefined
  ) {
    return (
      <UIAccordion.Icon
        ref={ref}
        {...props}
        className={accordionIconStyle({ class: className })}
      />
    )
  }
  return (
    <UIAccordion.Icon
      ref={ref}
      {...props}
      className={accordionIconStyle({
        size,
        class: className,
        parentVariants: { size: parentSize },
      })}
    />
  )
})

const AccordionHeader = React.forwardRef<
  React.ElementRef<typeof UIAccordion.Header>,
  IAccordionHeaderProps
>(({ className, ...props }, ref) => {
  return (
    <UIAccordion.Header
      ref={ref}
      {...props}
      className={accordionHeaderStyle({
        class: className,
      })}
    />
  )
})

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof UIAccordion.Trigger>,
  IAccordionTriggerProps
>(({ className, ...props }, ref) => {
  return (
    <UIAccordion.Trigger
      ref={ref}
      {...props}
      className={accordionTriggerStyle({
        class: className,
      })}
    />
  )
})
const AccordionTitleText = React.forwardRef<
  React.ElementRef<typeof UIAccordion.TitleText>,
  IAccordionTitleTextProps
>(({ className, ...props }, ref) => {
  const { size } = useStyleContext(SCOPE)
  return (
    <UIAccordion.TitleText
      ref={ref}
      {...props}
      className={accordionTitleTextStyle({
        parentVariants: { size },
        class: className,
      })}
    />
  )
})

Accordion.displayName = "Accordion"
AccordionItem.displayName = "AccordionItem"
AccordionHeader.displayName = "AccordionHeader"
AccordionTrigger.displayName = "AccordionTrigger"
AccordionTitleText.displayName = "AccordionTitleText"
AccordionContentText.displayName = "AccordionContentText"
AccordionIcon.displayName = "AccordionIcon"
AccordionContent.displayName = "AccordionContent"

export {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionTrigger,
  AccordionTitleText,
  AccordionContentText,
  AccordionIcon,
  AccordionContent,
}

Step 3: Update the import paths to match your project setup.

API Reference

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

import {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionTrigger,
  AccordionTitleText,
  AccordionContent,
  AccordionContentText,
  AccordionIcon,
} from "@/components/ui/accordion"

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.

Accordion

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.

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).

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
      className="w-[90%] m-5 border border-outline-300"
      type="multiple"
    >
      <AccordionItem value="a" className="border-b border-outline-300">
        <AccordionHeader className="bg-background-0">
          <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 className="mt-0 pt-2 bg-background-50">
          <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" className="border-b border-outline-300">
        <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 className="mt-0 pt-2 bg-background-50">
          <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 className="bg-background-0">
          <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 className="mt-0 pt-2 bg-background-50">
          <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 className="m-5 w-[80%] max-w-[640px] bg-transparent">
      <AccordionItem value="item-1" className="rounded-lg">
        <AccordionHeader>
          <AccordionTrigger className="focus:web:rounded-lg">
            {({ isExpanded }) => {
              return (
                <>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} className="mr-3" />
                  ) : (
                    <AccordionIcon as={PlusIcon} className="mr-3" />
                  )}
                  <AccordionTitleText>
                    How do I place an order?
                  </AccordionTitleText>
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent className="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" className="mt-5 rounded-lg">
        <AccordionHeader>
          <AccordionTrigger className="focus:web:rounded-lg">
            {({ isExpanded }) => {
              return (
                <>
                  {isExpanded ? (
                    <AccordionIcon as={MinusIcon} className="mr-3" />
                  ) : (
                    <AccordionIcon as={PlusIcon} className="mr-3" />
                  )}
                  <AccordionTitleText>
                    What payment methods do you accept?
                  </AccordionTitleText>
                </>
              )
            }}
          </AccordionTrigger>
        </AccordionHeader>
        <AccordionContent className="ml-9">
          <AccordionContentText>
            We accept all major credit cards, including Visa, Mastercard, and
            American Express. We also support payments through PayPal.

Accordion

Installation

Run the following command:

Step 1: Install the following dependencies:

Step 2: Copy and paste the following code into your project.

Step 3: Update the import paths to match your project setup.

API Reference

Component Props

Accordion

AccordionItem

AccordionHeader

AccordionTrigger

AccordionTitleText

AccordionIcon

AccordionContent

AccordionContentText

Accessibility

Keyboard Interactions

Screen Reader

Examples

Customized Component

Rounded corners