---
title: Fisarmonica
description: Sezioni di contenuto comprimibili che consentono di espandere solo ciò che serve. Ideali per FAQ, elenchi di funzionalità e opzioni di configurazione.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Sezioni comprimibili: i lettori vedono l'intestazione e la espandono per visualizzare i dettagli. Supportano icone, descrizioni e raggruppamenti.

Usa le fisarmoniche per:
- **FAQ**: gli utenti esaminano le domande ed espandono le risposte
- **Elenchi di funzionalità**: ogni funzionalità ha una sezione con i relativi dettagli
- **Opzioni di configurazione**: raggruppa le impostazioni per categoria
- **Guide passo passo** con dettagli espandibili

## Utilizzo

```mdx
<Accordion title="Advanced Configuration">
  Optional details go here.
</Accordion>
```

## Fisarmonica di base

<Accordion title="Fai clic per espandere">
  Questo contenuto è nascosto finché la fisarmonica non viene espansa.

  Qui puoi includere qualsiasi contenuto: testo, codice, immagini o altri componenti.
</Accordion>

```mdx
<Accordion title="Click to expand">
  This content is hidden until the accordion is expanded.

  You can include any content here: text, code, images, or other components.
</Accordion>
```

## Con descrizione

Aggiungi un sottotitolo con la prop `description`:

<Accordion title="Riferimento API" description="Endpoint di autenticazione">
  Qui inserisci la documentazione per gli endpoint API di autenticazione.
</Accordion>

```mdx
<Accordion title="API Reference" description="Authentication endpoints">
  Documentation for authentication API endpoints goes here.
</Accordion>
```

## Aperta per impostazione predefinita

Inizia con la fisarmonica espansa usando `defaultOpen`:

<Accordion title="Già espansa" defaultOpen>
  Questa fisarmonica inizia nello stato aperto.
</Accordion>

```mdx
<Accordion title="Already Expanded" defaultOpen>
  This accordion starts in the open state.
</Accordion>
```

## Con icona

<Accordion title="Impostazioni" icon="gear">
  Opzioni di configurazione e impostazioni.
</Accordion>

```mdx
<Accordion title="Settings" icon="gear">
  Configuration options and settings.
</Accordion>
```

## Fisarmonica e contenuto espandibile a confronto

| Funzionalità | Fisarmonica | Contenuto espandibile |
|---------|-----------|------------|
| Icone | Sì | No |
| Descrizioni | Sì (sottotitolo) | No |
| Raggruppamento | AccordionGroup | Autonomo |
| Peso visivo | Maggiore, simile a una sezione | Minore, in linea |
| Ideale per | FAQ, elenchi di funzionalità | Contenuti supplementari |

**Regola generale:** usa la fisarmonica quando le sezioni hanno la stessa importanza e gli utenti devono scegliere tra loro. Usa il contenuto espandibile per dettagli utili ma non essenziali che non richiedono particolare rilievo visivo.

## Proprietà

<ParamField name="title" type="string" required>
  Testo dell'intestazione della fisarmonica.
</ParamField>

<ParamField name="description" type="string">
  Sottotitolo visualizzato sotto il titolo.
</ParamField>

<ParamField name="icon" type="string">
  Nome dell'icona Font Awesome (ad es. "gear", "settings").
</ParamField>

<ParamField name="iconType" type="string" default="light">
  Variante dello stile dell'icona: light, regular o solid.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Inizia nello stato espanso.
</ParamField>

## E dopo?

<Columns cols={2}>
  <Card title="Panoramica dei componenti" icon="puzzle-piece" href="/it/components/overview">
    Esplora tutti i componenti disponibili
  </Card>
  <Card title="Nozioni di base su MDX" icon="file-code" href="/it/content/mdx-basics">
    Scopri come usare i componenti in MDX
  </Card>
</Columns>