# Accordion

> Stacked headings that each reveal a section, with single or multiple open items.

Category: Data display · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/accordion

Use Accordion to shorten long pages whose sections people read selectively, such as FAQs, settings groups and policy details. Avoid hiding content everyone needs. Built on the WAI-ARIA accordion pattern with real headings and buttons.

## Import

```tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@bindshq/stance-react';

const faqs = [
  [
    'deploy',
    'How are signatures deployed?',
    'eSignify pushes signatures through your Exchange relay, so every email sent from Outlook, mobile or web gets the right signature.',
  ],
  [
    'change',
    'Can people edit their own details?',
    'Yes. Admins choose which fields people can edit, such as job title or phone number. Everything else is locked to the template.',
  ],
  [
    'remove',
    'What happens when someone leaves?',
    'Removing a user stops future deployments. Their last signature stays in sent mail but is no longer updated.',
  ],
] as const;

export function Basic() {
  return (
    <Accordion defaultValue="deploy">
      {faqs.map(([value, q, a]) => (
        <AccordionItem key={value} value={value}>
          <AccordionTrigger>{q}</AccordionTrigger>
          <AccordionContent>{a}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}
```

### Multiple open

```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@bindshq/stance-react';

const faqs = [
  [
    'deploy',
    'How are signatures deployed?',
    'eSignify pushes signatures through your Exchange relay, so every email sent from Outlook, mobile or web gets the right signature.',
  ],
  [
    'change',
    'Can people edit their own details?',
    'Yes. Admins choose which fields people can edit, such as job title or phone number. Everything else is locked to the template.',
  ],
  [
    'remove',
    'What happens when someone leaves?',
    'Removing a user stops future deployments. Their last signature stays in sent mail but is no longer updated.',
  ],
] as const;

export function Multiple() {
  return (
    <Accordion type="multiple" defaultValue={['deploy', 'change']}>
      {faqs.map(([value, q, a]) => (
        <AccordionItem key={value} value={value}>
          <AccordionTrigger>{q}</AccordionTrigger>
          <AccordionContent>{a}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  );
}
```

### Separated variant

```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@bindshq/stance-react';

export function Separated() {
  return (
    <Accordion variant="separated" headingLevel={4}>
      <AccordionItem value="relay">
        <AccordionTrigger>Exchange relay</AccordionTrigger>
        <AccordionContent>Connected to smtp.binds.si on port 587.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="azure">
        <AccordionTrigger>Azure AD sync</AccordionTrigger>
        <AccordionContent>Syncs users and departments every hour.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="google" disabled>
        <AccordionTrigger>Google Workspace (coming soon)</AccordionTrigger>
        <AccordionContent>Not yet available.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Accordion | `type` | `'single' \| 'multiple'` | `'single'` | One or many open items. |
| Accordion | `value` | `string \| null \| string[]` | None | Controlled open item(s). |
| Accordion | `defaultValue` | `string \| null \| string[]` | None | Initially open item(s). |
| Accordion | `onValueChange` | `(value) => void` | None | Called when items open or close. |
| Accordion | `collapsible` | `boolean` | `true` | Single mode: allow closing the open item. |
| Accordion | `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `3` | Heading level wrapping each trigger. |
| Accordion | `variant` | `'default' \| 'separated'` | `'default'` | Ruled list or separate panels. |
| Accordion | `disabled` | `boolean` | `false` | Disable all items. |
| AccordionItem | `value` (required) | `string` | None | Unique item value. |
| AccordionItem | `disabled` | `boolean` | None | Disable this item. |
| AccordionTrigger | `hideIndicator` | `boolean` | `false` | Hide the chevron. |
| AccordionContent | `forceMount` | `boolean` | `false` | Keep mounted while closed. |

## Accessibility

- Each trigger is a button inside a heading, with aria-expanded and aria-controls.
- Each panel is a region labelled by its trigger.
- Arrow keys, Home and End move between headers; disabled items are skipped.
- Closed panels are removed from the accessibility tree.

## Keyboard

| Keys | Action |
| --- | --- |
| `Enter` `Space` | Opens or closes the focused section. |
| `ArrowDown` `ArrowUp` | Moves to the next or previous header. |
| `Home` `End` | Moves to the first or last header. |
| `Tab` | Moves through headers and into open panels. |

## Guidelines

**Do**

- Write triggers as clear questions or section names.

**Don’t**

- Nest accordions.
- Hide critical information in a closed panel.

## Related

- https://stanceui.com/components/collapsible
- https://stanceui.com/components/tabs