Accordion

api-draft

The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space.

Anatomy

API Reference

Accessibility

Unstyled

Anatomy

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

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

API Reference

The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects.

Accordion

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

Prop	Type	Default	Description
type	"single" \| "multiple"	-	Determines whether one or multiple items can be opened at the same time.
isCollapsible	boolean	false	When type is "single", 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 "multiple". Use when you do not need to control the state of the items.
value	string[]	[]	The controlled value of the item to expand when type is "multiple". Must be used in conjunction with onValueChange.
onValueChange	function	-	Event handler called when the expanded state of an item changes and type is "single".
isDisabled	boolean	false	When true, prevents the user from interacting with the accordion and all its items.
orientation	"horizontal" \| "vertical"	"vertical"	The orientation of the accordion.

Accordion.Item

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 "multiple". Must be used in conjunction with onValueChange.
isDisabled	boolean	false	When true, prevents the user from interacting with the accordion and all its items.

Accordion.Header

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

Accordion.Trigger

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.

Accordion.Content

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

AccordionIcon

It inherits all the properties of React Native's View 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="true" when the Accordion Content is visible.
aria-labelledby="IDREF" 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.
ArrowDown - Moves focus to the next Accordion.Trigger when orientation is vertical.
ArrowUp - Moves focus to the previous Accordion.Trigger when orientation is vertical.
ArrowRight - Moves focus to the next Accordion.Trigger when orientation is horizontal.
ArrowLeft - Moves focus to the previous Accordion.Trigger when orientation is horizontal.
Home - When focus is on an Accordion.Trigger, moves focus to the first Accordion.Trigger.
End - When focus is on an Accordion.Trigger, moves focus to the last Accordion.Trigger.

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.

Customizing the Accordion

We have a function called createAccordion which can be used to create a custom accordion component. This function takes in a configuration object which contains the styled components that you want to use for the Accordion. You can refer gluestack.io/style on how to use styled components.

You can read more on how to animate components here.

Usage

Default styling of all these components can be found in the components/core/accordion file. For reference, you can view the source code of the styled Accordion components.

// import the styled components

import {
  Root,
  Header,
  Trigger,
  Content,
  Item,
  Icon,
} from "../components/core/accordion/styled-components"

// import the createAccordion function
import { createAccordion } from "@gluestack-ui/accordion"

// Understanding the API
export const Accordion = createAccordion({
  Root,
  Header,
  Trigger,
  Content,
  Item,
  Icon,
})

// Using the accordion component
export default () => (
  <Accordion>
    <AccordionItem>
      <AccordionHeader>
        <AccordionTrigger>
          <Text>Accordion Item 1</Text>
          <AccordionIcon>
            <AddIcon />
          </AccordionIcon>
        </AccordionTrigger>
      </AccordionHeader>
      <AccordionContent>
        <Text>Accordion Content 1</Text>
      </AccordionContent>
    </AccordionItem>
    {/* ... */}
    <AccordionItem>
      <AccordionHeader>
        <AccordionTrigger>
          <Text>Accordion Item 4</Text>
          <AccordionIcon>
            <AddIcon />
          </AccordionIcon>
        </AccordionTrigger>
      </AccordionHeader>
      <AccordionContent>
        <Text>Accordion Content 4</Text>
      </AccordionContent>
    </AccordionItem>
  </Accordion>
)

Edit this page on GitHub