# Accordion (React Native)

> Collapsible sections with animated height.

GramproKit for React Native · Display · Beta · Source: https://kit.gramproindia.com/native/docs/accordion

> **Beta:** React Native support is in beta. APIs may change or break between prereleases (npm tag `native`).

_Interactive demo:_ [open the live example](https://kit.gramproindia.com/native/docs/accordion). The example's source:

```tsx
import { useState } from "react";
import { Text } from "react-native";
import { Accordion, AccordionItem } from "@/component-lib/accordion";
import { Badge } from "@/component-lib/badge";
import { useKitTheme } from "@/component-lib/shared/native";
import { Section } from "./layout"; // Section and Row: page layout for the demo

const FAQ = [
  {
    value: "gst",
    title: "Do invoices include GST?",
    content: "Yes. GST is worked out per line from the item's HSN code and the place of supply.",
  },
  {
    value: "export",
    title: "Can I export to Tally?",
    description: "XML and Excel",
    content: "Export a period as Tally XML or as an Excel workbook from the Reports tab.",
  },
  {
    value: "users",
    title: "How many people can use one workspace?",
    content: "Up to 25 on the Pro plan. Each person gets their own sign-in and role.",
  },
  {
    value: "legacy",
    title: "Legacy import (retired)",
    content: "No longer available.",
    disabled: true,
  },
];

export function AccordionDemo() {
  const { tokens } = useKitTheme();
  const [open, setOpen] = useState<string[]>(["export"]);
  return (
    <>
      <Section title="Accordion · separated (items prop)">
        <Accordion items={FAQ} value={open} onValueChange={setOpen} />
        <Text style={{ color: tokens.muted, fontSize: tokens.fontSize - 2 }}>
          Open: {open.length ? open.join(", ") : "none"}
        </Text>
      </Section>

      <Section title="Accordion · contained, multiple">
        <Accordion variant="contained" multiple defaultValue={["a"]}>
          <AccordionItem value="a" title="Billing address" meta={<Badge>Required</Badge>}>
            12 MG Road, Kochi, Kerala 682016
          </AccordionItem>
          <AccordionItem value="b" title="Shipping address" description="Same as billing">
            Ships to the billing address unless you add another.
          </AccordionItem>
          <AccordionItem value="c" title="Notes">
            Deliver between 10 am and 5 pm.
          </AccordionItem>
        </Accordion>
      </Section>

      <Section title="Accordion · plain, chevron at start, not collapsible">
        <Accordion variant="plain" iconPosition="start" collapsible={false} defaultValue={["one"]} size="sm">
          <AccordionItem value="one" title="Step 1 · Company">
            Legal name, GSTIN and PAN.
          </AccordionItem>
          <AccordionItem value="two" title="Step 2 · Bank">
            Account number and IFSC.
          </AccordionItem>
          <AccordionItem value="three" title="Step 3 · Review">
            Check everything before submitting.
          </AccordionItem>
        </Accordion>
      </Section>
    </>
  );
}
```

## Install

```bash
npx @grampro/kit@native add Accordion
```

## Usage

```tsx
import { Accordion, AccordionItem } from "@/component-lib/accordion";

<Accordion collapsible>
  <AccordionItem value="gst" title="Is GST included?">Yes, 18%.</AccordionItem>
  <AccordionItem value="refund" title="Refunds">Within 7 days.</AccordionItem>
</Accordion>
```

## Props

### AccordionProps

| Prop | Type | Description |
|---|---|---|
| `value` | `string[]` | Open panels, by value (controlled). |
| `defaultValue` | `string[]` | Panels open to begin with, when you are not controlling `value`. |
| `onValueChange` | `(value: string[]) => void` | The open panels after a change, always an array even with `multiple` off. |
| `items` | `readonly AccordionItemData[]` | Render these panels, or pass `<AccordionItem>` children. |
| `children` | `ReactNode` |   |
| `multiple` | `boolean` | Allow more than one panel open at a time. Default false. |
| `collapsible` | `boolean` | Allow the open panel to be closed again. Default true. |
| `variant` | `AccordionVariant` | Default `separated`. |
| `size` | `AccordionSize` | Default `md`. |
| `iconPosition` | `AccordionIconPosition` | Which side the chevron sits on. Default `end`. |
| `style` | `StyleProp<ViewStyle>` |   |
| `styles` | `Partial<Record<AccordionSlot, StyleProp<ViewStyle>>>` |   |

### AccordionItemProps

| Prop | Type | Description |
|---|---|---|
| `value` (required) | `string` | Identifies the panel in the accordion's value. |
| `title` (required) | `ReactNode` |   |
| `description` | `ReactNode` | A second line under the title. |
| `children` | `ReactNode` |   |
| `meta` | `ReactNode` | Something at the end of the header: a badge, a count. |
| `icon` | `ReactNode` | Replaces the chevron. |
| `disabled` | `boolean` |   |
| `style` | `StyleProp<ViewStyle>` |   |
| `styles` | `Partial<{ root: StyleProp<ViewStyle>; header: StyleProp<ViewStyle> \| ((state: Accordion…` |   |

## Native and web

- Closed sections stay mounted but are hidden from screen readers.
- Web version: [Accordion on the web](https://kit.gramproindia.com/accordion).