Accordion
Accordéon
Un ensemble vertical d'en-têtes qui révèle ou masque chaque section de contenu associée.
Avec vos mots
Ce que les gens décrivent
Alias documentés : sections dépliables, panneaux repliables, liste de révélations
- des questions qui ouvrent les réponses dessous
- cliquer sur un titre pour développer sa section
- une liste verticale de contenu repliable
- afficher et masquer les détails ligne par ligne
- une FAQ avec des réponses dépliables
- ouvrir plusieurs sections sans changer de page
Essayer
Changer de vue ou révéler du contenu
Comparer les trois comportements
Scénario comparatif partagé : Un espace projet révèle du contenu associé sur place tout en conservant la position de l'utilisateur dans la page.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Accordéon
Accordion révèle les sections sous leurs en-têtes ; Tabs remplace un panneau de même niveau, tandis que Segmented control choisit une valeur compacte.
Votre mission
Développer Remboursements, atteindre Moyens de paiement au clavier, l'ouvrir et replier Remboursements.
Cas limite à vérifier
Une section obligatoirement ouverte ne peut pas être repliée et communique cette règle sans faux contrôle.
Mission
Accordéon - Accordion
Développer Remboursements, atteindre Moyens de paiement au clavier, l'ouvrir et replier Remboursements.
Informations essentielles, toujours ouvertes
Cette réponse doit rester visible pour terminer la procédure.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
En-tête
Un en-tête pertinent qui introduit le message ou le contenu révélé.
À utiliser quand
- Organiser des FAQ ou sections de détail facultatives
- Permettre de parcourir les en-têtes avant d'ouvrir le contenu utile
À éviter quand
- Tout le contenu est assez court pour être affiché
- Les sections sont des destinations principales qui nécessitent des URL
Comparer les concepts proches
Tabs contrôle des panneaux de contenu ; Segmented control choisit une valeur, tandis qu'Accordion révèle des sections verticales sans remplacer un panneau commun.
OngletsSegmented control sélectionne une valeur ; Tabs sélectionne un panneau de contenu, tandis qu'Accordion développe ou replie des sections.
Contrôle segmentéBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Révéler et masquer une section
Activer un en-tête révèle ou masque son contenu associé tout en exposant l'état développé.
Naviguer avec les flèches
Les flèches parcourent les éléments liés selon leur orientation visuelle.
États
Remboursements repliés
Remboursements repliés
Remboursements développés
Remboursements développés
Transitions d’état
Remboursements repliés → Remboursements développés
L’activation de l’en-tête Remboursements affiche sa réponse juste après l’en-tête.
Remboursements développés → Remboursements repliés
L’activation de l’en-tête Remboursements développé masque uniquement sa réponse associée.
Scénarios de test
- Contexte
- Une aide de facturation regroupe les réponses sur factures, remboursements et moyens de paiement.
- Mission
- Développer Remboursements, atteindre Moyens de paiement au clavier, l'ouvrir et replier Remboursements.
- État principal
- L'en-tête développé expose son état et la réponse apparaît juste après.
- Cas limite
- Une section obligatoirement ouverte ne peut pas être repliée et communique cette règle sans faux contrôle.
Accessibilité
- Role
- heading containing button with aria-expanded and controlled region
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- Le focus reste sur le bouton d'en-tête lorsque son panneau s'ouvre ou se ferme.
- Fermeture
- Chaque panneau développé se ferme en activant son propre en-tête lorsque le produit permet le repli.
- Scroll
- Le développement ou la réduction du contenu garde l'en-tête de contrôle visible et évite tout saut inattendu dans la page.
- Annonce
- Le niveau d'en-tête, le nom du bouton, l'état développé et la relation contrôlée sont exposés.
- Clavier
- Tab atteint chaque bouton d'en-tête
- Entrée ou Espace bascule une section
- Les flèches facultatives parcourent les en-têtes
Bindings
Accordion.Root
- implementationKind
- radix
- nativeElement
- Non applicable
- ariaPattern
- accordion
- radixPrimitive
- Accordion
- shadcnRecipe
- Accordion
- runtimeDependency
- @radix-ui/react-accordion@1.2.16
- packageName
- @radix-ui/react-accordion
- exportName
- Accordion.Root
- exactVersion
- 1.2.16
- status
- verified
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Radix supplies disclosure state and keyboard support; heading levels, single or multiple expansion, and region use remain content decisions.
Vérifier la source du binding
Sources
- WAI-ARIA APG: Accordion Pattern
W3C WAI · standard · 2026-07-16
Affirmation couverte : Accordion: accordion header and panel relationships plus expansion and keyboard guidance.
- Radix Primitives: Accordion
Radix Primitives · documentation · 2026-07-16
Affirmation couverte : Accordion: documented Radix Accordion parts, single or multiple expansion, and keyboard behavior.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.