---
title: Accordéon
description: "Sections repliables pour développer uniquement ce dont les utilisateurs ont besoin. Idéal pour les FAQ, les listes de fonctionnalités et la configuration."
---

Sections repliables -- les lecteurs voient le titre et développent pour les détails. Prend en charge les icônes, les descriptions et le regroupement.

Utilisez les Accordions quand :
- **FAQ** - Les utilisateurs parcourent les questions et développent les réponses
- **Listes de fonctionnalités** - Chaque fonctionnalité dispose d'une section avec des détails
- **Options de configuration** - Regroupez les paramètres par catégorie
- **Guides étape par étape** avec des détails développables

## Utilisation

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

## Accordion de base

<Accordion title="Cliquer pour développer">
  Ce contenu est masqué jusqu'à ce que l'accordion soit développé.

  Vous pouvez inclure n'importe quel contenu ici : texte, code, images ou autres composants.
</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>
```

## Avec description

Ajoutez un sous-titre avec la prop `description` :

<Accordion title="Référence API" description="Endpoints d'authentification">
  La documentation des endpoints d'authentification API se trouve ici.
</Accordion>

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

## Ouvert par défaut

Démarrez développé avec `defaultOpen` :

<Accordion title="Déjà développé" defaultOpen>
  Cet accordion démarre dans l'état ouvert.
</Accordion>

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

## Avec icône

<Accordion title="Paramètres" icon="gear">
  Options de configuration et paramètres.
</Accordion>

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

## Accordion vs Expandable

| Fonctionnalité | Accordion | Expandable |
|---------|-----------|------------|
| Icônes | Oui | Non |
| Descriptions | Oui (sous-titre) | Non |
| Regroupement | AccordionGroup | Autonome |
| Poids visuel | Plus lourd, type section | Plus léger, inline |
| Idéal pour | FAQ, listes de fonctionnalités | Contenu complémentaire |

**Règle générale :** Utilisez Accordion lorsque les sections sont également importantes et que les utilisateurs choisissent entre elles. Utilisez Expandable pour des détails « agréables à avoir » qui n'ont pas besoin d'une prominence visuelle.

## Props

<ParamField name="title" type="string" required>
  Texte d'en-tête de l'accordion.
</ParamField>

<ParamField name="description" type="string">
  Sous-titre affiché sous le titre.
</ParamField>

<ParamField name="icon" type="string">
  Nom d'icône Font Awesome (ex. : « gear », « settings »).
</ParamField>

<ParamField name="iconType" type="string" default="light">
  Variante de style d'icône : light, regular ou solid.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Démarrer dans l'état développé.
</ParamField>

## Et ensuite ?

<Columns cols={2}>
  <Card title="Vue d'ensemble des composants" icon="puzzle-piece" href="/fr/components/overview">
    Parcourir tous les composants disponibles
  </Card>
  <Card title="Bases MDX" icon="file-code" href="/fr/content/mdx-basics">
    Apprendre à utiliser les composants dans MDX
  </Card>
</Columns>