Accordion

Source

Theme Source

The Accordion component in Pearl UI is a versatile and customizable element used to display collapsible content panels for presenting information in a limited amount of space.

Import#

Pearl UI provides four components related to the Accordion functionality:

Accordion: This is the parent component that acts as a container for multiple AccordionItem components.
AccordionItem: This component represents a single collapsible content panel within the Accordion.
AccordionButton: This component controls the visibility of its corresponding AccordionPanel.
AccordionPanel: This component contains the content that is shown or hidden when the AccordionButton is clicked.

import {  Accordion,  AccordionItem,  AccordionButton,  AccordionPanel,} from "pearl-ui";

Usage#

<Accordion>  <AccordionItem>    <AccordionButton>      <Text>Accordion Section 1</Text>    </AccordionButton>    <AccordionPanel>      <Text>        This is the content for the first section of the accordion. It can be        replaced with any content you like.      </Text>    </AccordionPanel>  </AccordionItem>
  <AccordionItem>    <AccordionButton>      <Text>Accordion Section 2</Text>    </AccordionButton>    <AccordionPanel>      <Text>        This is the content for the second section of the accordion. It can be        replaced with any content you like.      </Text>    </AccordionPanel>  </AccordionItem></Accordion>

Accordion with multiple items expanded#

The allowMultiple prop allows you to have multiple accordion items expanded at once.

<Accordion allowMultiple>  <AccordionItem>    <AccordionButton>      <Text>Accordion Section 1</Text>    </AccordionButton>    <AccordionPanel>      <Text>        This is the content for the first section of the accordion. It can be        replaced with any content you like.      </Text>    </AccordionPanel>  </AccordionItem>
  <AccordionItem>    <AccordionButton>      <Text>Accordion Section 2</Text>    </AccordionButton>    <AccordionPanel>      <Text>        This is the content for the second section of the accordion. It can be        replaced with any content you like.      </Text>    </AccordionPanel>  </AccordionItem></Accordion>

Accordion with toggle#

The allowToggle prop allows any expanded accordion item to be collapsed again.

<Accordion allowToggle>  <AccordionItem>    <AccordionButton>      <Text>Accordion Section 1</Text>    </AccordionButton>    <AccordionPanel>      <Text>        This is the content for the first section of the accordion. It can be        replaced with any content you like.      </Text>    </AccordionPanel>  </AccordionItem>
  <AccordionItem>    <AccordionButton>      <Text>Accordion Section 2</Text>    </AccordionButton>    <AccordionPanel>      <Text>        This is the content for the second section of the accordion. It can be        replaced with any content you like.      </Text>    </AccordionPanel>  </AccordionItem></Accordion>

Accordion with initial index#

The defaultIndices prop allows you to specify the initial index(es) of the expanded accordion item.

<Accordion defaultIndices={[1]}>  <AccordionItem>    <AccordionButton>      <Text>Accordion Section 1</Text>    </AccordionButton>    <AccordionPanel>      <Text>        This is the content for the first section of the accordion. It can be        replaced with any content you like.      </Text>    </AccordionPanel>  </AccordionItem>
  <AccordionItem>    <AccordionButton>      <Text>Accordion Section 2</Text>    </AccordionButton>    <AccordionPanel>      <Text>        This is the content for the second section of the accordion. It can be        replaced with any content you like.      </Text>    </AccordionPanel>  </AccordionItem></Accordion>

Accordion with reduced motion#

The reduceMotion prop allows you to disable height animation and transitions.

<Accordion reduceMotion>  <AccordionItem>    <AccordionButton>      <Text>Accordion Section 1</Text>    </AccordionButton>    <AccordionPanel>      <Text>        This is the content for the first section of the accordion. It can be        replaced with any content you like.      </Text>    </AccordionPanel>  </AccordionItem>
  <AccordionItem>    <AccordionButton>      <Text>Accordion Section 2</Text>    </AccordionButton>    <AccordionPanel>      <Text>        This is the content for the second section of the accordion. It can be        replaced with any content you like.      </Text>    </AccordionPanel>  </AccordionItem></Accordion>

Accessing the internal state#

If you need access to the internal state of each accordion item, you can use a render prop. It provides 2 internal state props: isExpanded and isDisabled.

Accordion Section 1

This is the content for the first section of the accordion. It can be replaced with any content you like.

Example#

Embed not loading? Click here

Accessibility#

AccordionButton has the role of button.
When the AccordionButton is pressed, it controls the visibility of the AccordionPanel.

Accordion Component Properties#

Supported Style Properties#

The Accordion component is a composition of the Stack component. Therefore, all properties related to the Stack component can be passed to the Accordion component, in addition to the properties listed below.

Additional Properties#

Property Name	Required	Data Type	Default	Description
`size`	No	PearlTheme.components.Accordion["sizes"]		Determines the size of the accordion.
`variant`	No	PearlTheme.components.Accordion["variants"]		Determines the variant of the accordion.
`allowMultiple`	No	boolean	`false`	If true, multiple accordion items can be expanded at once.
`allowToggle`	No	boolean	`false`	If true, any expanded accordion item can be collapsed again.
`defaultIndices`	No	number[]	`[]`	The initial index(es) of the expanded accordion item.
`reduceMotion`	No	boolean	`false`	If true, height animation and transitions will be disabled.

AccordionItem Component Properties#

Supported Style Properties#

The AccordionItem component is a composition of the Stack component. Therefore, all properties related to the Stack component can be passed to the AccordionItem component, in addition to the properties listed below.

Additional Properties#

Property Name	Required	Data Type	Default	Description
`index`	No	number	`0`	The index of the accordion item.
`children`	No	ReactNode or ((isExpanded: boolean) => ReactNode)	`null`	The children of the accordion item, which can be a function. If it is a function, it receives the expanded state of the accordion item as an argument.

AccordionButton Component Properties#

Supported Style Properties#

The AccordionButton component is a composition of the Pressable component. Therefore, all properties related to the Pressable component can be passed to the AccordionButton component, in addition to the properties listed below.

Additional Properties#

Property Name	Required	Data Type	Default	Description
`icon`	No	React.ReactElement	`null`	Icon to display on the right side of the accordion button.
`onPress`	No	(index: number) => void	`null`	A function that is called when the accordion item is pressed. It receives the index of the accordion item as an argument.

AccordionPanel Component Properties#

Supported Style Properties#

The AccordionPanel component is a composition of the Collapse component. Therefore, all properties related to the Collapse component can be passed to the AccordionPanel component, in addition to the properties listed below.