# Accordion

Sanfona, para perguntas frequentes e para secoes longas de formulário.

O `AccordionItem` entrega cabeçalho, gatilho e painel numa peça só, porque a
Base UI exige a ordem exata entre eles e expor as partes soltas só criaria um
jeito de montar errado.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `Accordion` - cada `AccordionItem` guarda o próprio aberto; não há raiz controlada. Abre com a seta girando e o corpo em fade, e sem movimento quando o sistema pede para reduzir. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { Accordion } from '@rivocode/ui'
```

## Exemplos

### Perguntas

```tsx
import { Accordion, AccordionItem } from '@rivocode/ui'

export function Questions() {
  return (
    <div className="w-96">
      <Accordion defaultValue={['como-emitir']}>
        <AccordionItem value="como-emitir" title="Como emito uma nota?">
          Pelo botão Emitir nota, no topo da listagem. O rascunho fica salvo se você sair no meio.
        </AccordionItem>
        <AccordionItem value="cancelar" title="Da para cancelar depois?">
          Da, enquanto a prefeitura não fechar o mês. Depois disso, so com nota de substituição.
        </AccordionItem>
        <AccordionItem value="email" title="Quem recebe o email?">
          O endereço do cliente cadastrado, com cópia para o financeiro.
        </AccordionItem>
      </Accordion>
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `defaultValue` | `AccordionValue<Value>` |  | 0.4.0 | The uncontrolled value of the item(s) that should be initially expanded. |
| `disabled` | `boolean` |  | 0.4.0 | Whether the component should ignore user interaction. |
| `hiddenUntilFound` | `boolean` |  | 0.4.0 | Allows the browser's built-in page search to find and expand the panel contents. |
| `keepMounted` | `boolean` |  | 0.4.0 | Whether to keep the element in the DOM while the panel is closed. |
| `loopFocus` | `boolean` |  | 0.4.0 | Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. |
| `multiple` | `boolean` |  | 0.4.0 | Whether multiple items can be open at the same time. |
| `onValueChange` | `((value: AccordionValue<Value>, eventDetails: AccordionRootChangeEventDetails) => void)` |  | 0.4.0 | Event handler called when an accordion item is expanded or collapsed. |
| `orientation` | `Orientation` |  | 0.4.0 | Deprecated following the [APG guidance update](https://github.com/w3c/aria-practices/pull/3434) to remove roving focus. |
| `render` | `ComponentRenderFn<HTMLProps, State<Value>> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `value` | `AccordionValue<Value>` |  | 0.4.0 | The controlled value of the item(s) that should be expanded. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [AspectRatio](/componentes/aspect-ratio.md)
- [Avatar](/componentes/avatar.md)
- [Card](/componentes/card.md)
- [Collapsible](/componentes/collapsible.md)
- [DataTable](/componentes/data-table.md)
- [DescriptionList](/componentes/description-list.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)