Accordion

Gli accordion sono sezioni comprimibili. I lettori vedono il titolo e lo espandono per visualizzare i dettagli. Un accordion può avere un'icona e una descrizione. È inoltre possibile raggruppare più accordion.

Usa gli Accordion quando:

• FAQ: i lettori scorrono le domande ed espandono le risposte
• Elenchi di funzionalità: ogni funzionalità ha una sezione con i dettagli
• Opzioni di configurazione: raggruppa le impostazioni per categoria
• Guide passo-passo con dettagli espandibili

Utilizzo

<Accordion title="Advanced Configuration">

  Optional details go here.

</Accordion>

Fisarmonica di base

<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="API Reference" description="Authentication endpoints">

  Documentation for authentication API endpoints goes here.

</Accordion>

Aperta per impostazione predefinita

Avvia espanso con defaultOpen:

<Accordion title="Already Expanded" defaultOpen>

  This accordion starts in the open state.

</Accordion>

Con icona

<Accordion title="Settings" icon="gear">

  Configuration options and settings.

</Accordion>

Fisarmonica e contenuto espandibile a confronto

Regola pratica: Usa Accordion quando le sezioni hanno pari importanza e i lettori scelgono tra di esse. Usa Expandable per i dettagli "utili ma non essenziali" che non richiedono particolare evidenza visiva.

Proprietà

E dopo?