Explore gluestack's Accordion component for Expo, next.js, React & React Native. Build sleek, interactive accordions with ease. This is an illustration of Accordion component.

size

variant

type

isCollapsible

isDisabled

Installation

Run the following command:

npx gluestack-ui add accordion

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.

Rounded corners

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

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.

Default value

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

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.

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.

Edit this page on GitHub