# Accordion

Stacks collapsible sections that each reveal a labelled panel.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Accordion.tsx)

## Overview

An accordion stacks collapsible sections. Each trigger toggles a labelled panel, and one item is open at a time by default.

Use it to shorten long pages of related content. Write trigger labels that summarize the hidden panel.

## Examples

### Basic

```tsx
import { Accordion, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Accordion.Root defaultValue={['one']} {...styles.root()}>
      <Accordion.Item value="one">
        <Accordion.Trigger>What is Tempo?</Accordion.Trigger>
        <Accordion.Panel>A blockchain for payments.</Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item value="two">
        <Accordion.Trigger>How do fees work?</Accordion.Trigger>
        <Accordion.Panel>Fees are paid in stablecoins.</Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  )
}

namespace styles {
  export const root = style({ maxWidth: '28rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Accordion/Basic.tsx)

### Size

Set `size` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Accordion, Stack, style } from '@tempoxyz/ds'

function Items(props: Accordion.Root.Props) {
  return (
    <Accordion.Root {...props}>
      <Accordion.Item value="one">
        <Accordion.Trigger>What is Tempo?</Accordion.Trigger>
        <Accordion.Panel>A blockchain for payments.</Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item value="two">
        <Accordion.Trigger>How do fees work?</Accordion.Trigger>
        <Accordion.Panel>Fees are paid in stablecoins.</Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  )
}

export function Demo() {
  return (
    <Stack gap="8" {...styles.stack()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Items defaultValue={['one']} key={size} size={size} />
      ))}
    </Stack>
  )
}

namespace styles {
  export const stack = style({ maxWidth: '28rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Accordion/Size.tsx)

### Multiple

Set `multiple` on `Accordion.Root` to let several items stay open at once.

```tsx
import { Accordion, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Accordion.Root multiple {...styles.root()}>
      <Accordion.Item value="one">
        <Accordion.Trigger>What is Tempo?</Accordion.Trigger>
        <Accordion.Panel>A blockchain for payments.</Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item value="two">
        <Accordion.Trigger>How do fees work?</Accordion.Trigger>
        <Accordion.Panel>Fees are paid in stablecoins.</Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  )
}

namespace styles {
  export const root = style({ maxWidth: '28rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Accordion/Multiple.tsx)

### Disabled

Set `disabled` on an `Accordion.Item` to keep it from opening.

```tsx
import { Accordion, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Accordion.Root {...styles.root()}>
      <Accordion.Item value="one">
        <Accordion.Trigger>What is Tempo?</Accordion.Trigger>
        <Accordion.Panel>A blockchain for payments.</Accordion.Panel>
      </Accordion.Item>
      <Accordion.Item disabled value="three">
        <Accordion.Trigger>Disabled</Accordion.Trigger>
        <Accordion.Panel>Hidden.</Accordion.Panel>
      </Accordion.Item>
    </Accordion.Root>
  )
}

namespace styles {
  export const root = style({ maxWidth: '28rem !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Accordion/Disabled.tsx)

## Guidelines

TODO: Write guidelines for Accordion.