Contenu

Accordéon

الأكورديونAccordion

Stablesrc/dsm/components/accordion.tsx
L'accordéon regroupe plusieurs panneaux de contenu repliables sous un intitulé cliquable — questions fréquentes, détails d'une démarche, pièces justificatives par catégorie. Un seul panneau ou plusieurs peuvent être ouverts à la fois.

Import

import { Accordion } from "@/dsm/components/accordion";

Exemples

Par défaut

Lignes divisées par des filets, un seul panneau ouvert à la fois.

LTR

Le délai moyen est de 5 jours ouvrés pour une demande complète déposée en ligne, contre 10 jours ouvrés au guichet.

Variante séparée

Panneaux indépendants sous forme de cartes espacées.

LTR

FAQ — Renouvellement de la CNIE

Cas réel avec plusieurs panneaux ouverts simultanément grâce à `multiple`.

LTR

Foire aux questions — Renouvellement de la CNIE

Oui, à partir de 90 jours avant la date d'expiration inscrite sur votre carte actuelle. Passé ce délai, la demande est traitée comme un premier établissement.

Usage

Quand l'utiliser

  • Utilisez l'accordéon pour des informations secondaires que l'utilisateur consulte à la demande, comme une foire aux questions.
  • Utilisez `variant="separated"` lorsque chaque panneau doit se lire comme une carte indépendante, par exemple des catégories de démarches.
  • Activez `multiple` lorsque les panneaux sont indépendants et gagnent à être comparés ouverts simultanément.

Quand ne pas l'utiliser

  • N'utilisez pas l'accordéon pour masquer une information indispensable à la réussite d'une démarche : gardez-la visible en permanence.
  • Évitez d'imbriquer un accordéon dans un autre panneau d'accordéon : préférez une page ou un sommaire dédié.

Accessibilité & langues

Accessibilité

  • Chaque intitulé est un vrai bouton (`Accordion.Trigger`) placé dans un `<h3>` : la navigation au clavier et par lecteur d'écran suit la hiérarchie des titres.
  • L'état ouvert ou fermé est exposé via `aria-expanded`, géré automatiquement par Base UI — aucune annotation manuelle n'est nécessaire.

RTL & multilingue

  • Le chevron pivote de la même façon dans les deux sens de lecture : une rotation verticale n'a pas besoin d'être inversée.
  • L'intitulé s'aligne avec `text-start`, donc à droite en arabe, sans classe supplémentaire.

Propriétés

Accordion
PropriétéTypeDéfautDescription
variant"default" | "separated"defaultStyle de regroupement des panneaux.
multiplebooleanfalseAutorise plusieurs panneaux ouverts en même temps.
defaultValueunknown[]—Valeurs initialement ouvertes, en mode non contrôlé.
valueunknown[]—Valeurs ouvertes, en mode contrôlé.
onValueChange(value: unknown[]) => void—Appelé quand un panneau s'ouvre ou se ferme.
AccordionItem
PropriétéTypeDéfautDescription
value*unknown—Identifiant unique du panneau.
title*ReactNode—Intitulé affiché dans l'en-tête cliquable.
disabledbooleanfalseDésactive l'ouverture du panneau.
children*ReactNode—Contenu affiché lorsque le panneau est ouvert.

Composants liés