Accordion

Surfaces & Layout

Accordion

Groups dense content into expandable sections with optional nested headers.

Usage

Wrap related panels and let users progressively disclose details without leaving the page.

Highlights

• Controlled or uncontrolled expansion
• Multiple item mode for advanced filters

When to use it

• You have FAQ-style content that benefits from progressive disclosure.
• You need to keep filters or settings compact on small screens.

Related components

CardListItem

Examples

Default

Preview (Web)

import { StyleSheet, View } from 'react-native';
import { Accordion, AccordionItem } from 'react-native-molecules/components/Accordion';
import { Icon } from 'react-native-molecules/components/Icon';
import { Text } from 'react-native-molecules/components/Text';

const styles = StyleSheet.create({
  item: { width: 360 },
  content: { padding: 16 },
  text: { fontSize: 16 },
});

const leftElement = ({ expanded, color }) => (
  <Icon color={color} name={expanded ? 'chevron-up' : 'chevron-down'} size={20} />
);

export default function Example() {
  return (
      <Accordion>
          <AccordionItem style={styles.item} id="1">
              <AccordionItem.Header left={leftElement}>First Item</AccordionItem.Header>
              <AccordionItem.Content>
                  <View style={styles.content}>
                      <Text style={styles.text}>
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque temporibus ut vero.
                          Ducimus
                      </Text>
                  </View>
              </AccordionItem.Content>
          </AccordionItem>
          <AccordionItem style={styles.item} id="2">
              <AccordionItem.Header left={leftElement}>Second Item</AccordionItem.Header>
              <AccordionItem.Content>
                  <View style={styles.content}>
                      <Text style={styles.text}>
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque temporibus ut vero.
                          Ducimus
                      </Text>
                  </View>
              </AccordionItem.Content>
          </AccordionItem>
      </Accordion>
  );
}

Controlled

Preview (Web)

import { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Accordion, AccordionItem } from 'react-native-molecules/components/Accordion';
import { Icon } from 'react-native-molecules/components/Icon';
import { Text } from 'react-native-molecules/components/Text';

const styles = StyleSheet.create({
  item: { width: 360 },
  content: { padding: 16 },
  text: { fontSize: 16 },
});

const leftElement = ({ expanded, color }) => (
  <Icon color={color} name={expanded ? 'chevron-up' : 'chevron-down'} size={20} />
);

export default function Example() {
  const [expandedItems, setExpandedItems] = useState<string[]>([]);

  return (
      <Accordion multiple expandedItemIds={expandedItems} onChange={ids => setExpandedItems(ids as string[])}>
          <AccordionItem style={styles.item} id="1">
              <AccordionItem.Header left={leftElement}>First Item</AccordionItem.Header>
              <AccordionItem.Content>
                  <View style={styles.content}>
                      <Text style={styles.text}>
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque temporibus ut vero.
                          Ducimus
                      </Text>
                  </View>
              </AccordionItem.Content>
          </AccordionItem>
          <AccordionItem style={styles.item} id="2">
              <AccordionItem.Header left={leftElement}>Second Item</AccordionItem.Header>
              <AccordionItem.Content>
                  <View style={styles.content}>
                      <Text style={styles.text}>
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque temporibus ut vero.
                          Ducimus
                      </Text>
                  </View>
              </AccordionItem.Content>
          </AccordionItem>
      </Accordion>
  );
}

Nested Accordion

Preview (Web)

import { StyleSheet, View } from 'react-native';
import { Accordion, AccordionItem } from 'react-native-molecules/components/Accordion';
import { Icon } from 'react-native-molecules/components/Icon';
import { Text } from 'react-native-molecules/components/Text';

const styles = StyleSheet.create({
  item: { width: 360 },
  content: { padding: 16 },
  text: { fontSize: 16 },
});

const leftElement = ({ expanded, color }) => (
  <Icon color={color} name={expanded ? 'chevron-up' : 'chevron-down'} size={20} />
);

export default function Example() {
  return (
      <Accordion>
          <AccordionItem style={styles.item} id="1">
              <AccordionItem.Header left={leftElement}>
                  Accordion (Accordion Group)
              </AccordionItem.Header>
              <AccordionItem.Content>
                  <View style={styles.content}>
                      <Text style={styles.text}>
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque temporibus ut vero.
                          Ducimus
                      </Text>
                  </View>
              </AccordionItem.Content>
          </AccordionItem>
          <AccordionItem style={styles.item} id="2">
              <AccordionItem.Header left={leftElement}>AccordionItem</AccordionItem.Header>
              <AccordionItem.Content>
                  <Accordion multiple>
                      <AccordionItem style={styles.item} id="nested-1">
                          <AccordionItem.Header left={leftElement}>Accordion Header</AccordionItem.Header>
                          <AccordionItem.Content>
                              <View style={styles.content}>
                                  <Text style={styles.text}>
                                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque temporibus ut
                                      vero. Ducimus
                                  </Text>
                              </View>
                          </AccordionItem.Content>
                      </AccordionItem>
                      <AccordionItem style={styles.item} id="nested-2">
                          <AccordionItem.Header left={leftElement}>Accordion Content</AccordionItem.Header>
                          <AccordionItem.Content>
                              <View style={styles.content}>
                                  <Text style={styles.text}>
                                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque temporibus ut
                                      vero. Ducimus
                                  </Text>
                              </View>
                          </AccordionItem.Content>
                      </AccordionItem>
                  </Accordion>
              </AccordionItem.Content>
          </AccordionItem>
      </Accordion>
  );
}

Prop	Type	Default	Description
childrenRequired	ReactElement<unknown, string | JSXElementConstructor<any>> | ReactElement<unknown, string | JSXElementConstructor<any>>[]	—	—
expandedItemIds	string | string[] | undefined	—	—
defaultExpandedItemIds	string | string[] | undefined	—	—
onChange	((expandedItems: string | string[]) => void) | undefined	—	—
multiple	boolean | undefined	—	—

Defined in react-native-molecules/components/Accordion