Onglet (Tab)

Utilisez les onglets pour alterner entre plusieurs panneaux de contenu au même niveau.

attention

Ce composant nécessite une licence Pro valide en production.

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:tabs, dsfr:tabs:list, dsfr:tabs:tab, dsfr:tabs:panel

Usage

• Chaque onglet doit cibler son panneau.
• Le panneau sélectionné porte la classe DSFR correspondante.

Modes d'utilisation

Exemple principal

Onglet · exemple principal

<twig:dsfr:tabs id="profile-tabs">
  <twig:dsfr:tabs:list label="Sections du profil">
    <twig:dsfr:tabs:tab panelId="identity-panel" selected>Identité</twig:dsfr:tabs:tab>
    <twig:dsfr:tabs:tab panelId="contact-panel">Contact</twig:dsfr:tabs:tab>
  </twig:dsfr:tabs:list>
  <twig:dsfr:tabs:panel id="identity-panel" selected>Informations d’identité.</twig:dsfr:tabs:panel>
  <twig:dsfr:tabs:panel id="contact-panel">Coordonnées.</twig:dsfr:tabs:panel>
</twig:dsfr:tabs>

Composition

Cette page expose aussi les sous-composants publics suivants : dsfr:tabs:list, dsfr:tabs:tab, dsfr:tabs:panel. Utilisez-les quand vous devez contrôler précisément la structure Twig au lieu de passer un tableau de données.

astuce

Préférez les sous-composants publics aux include, macros ou copies de templates internes. Cela garde votre code aligné avec les évolutions du bundle.

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:tabs
  id="onglet-example"
  class="fr-mt-2w"
  data-controller="onglet"
/>

API publique

Composant	Rôle
dsfr:tabs	Composant principal de cette page.
dsfr:tabs:list	Sous-composant public utilisable en composition Twig.
dsfr:tabs:tab	Sous-composant public utilisable en composition Twig.
dsfr:tabs:panel	Sous-composant public utilisable en composition Twig.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
tabs	slot/array	Selon usage	Onglets { id, label, icon?, selected? } ou sous-composants.
dsfr:tabs:list	props	label	Libellé accessible de la liste.
dsfr:tabs:tab	props	panelId, selected, icon	Bouton d’onglet.
dsfr:tabs:panel	props	id, selected	Panneau associé.

Guide d'intégration

Question	Réponse
Famille DSFR	Navigation
Quand l'utiliser	Quand l’usager doit se repérer, changer de section ou parcourir une liste de pages.
Quand éviter	Pour déclencher une action métier immédiate : utilisez plutôt un bouton.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:tabs, dsfr:tabs:list, dsfr:tabs:tab, dsfr:tabs:panel.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Onglet : composition avec 3 sous-composants

Variantes de onglet

• onglet avec attributs HTML pass-through pour id, class, data-* et aria-* quand le template le permet.

Points de contrôle propres à ce composant

• Chaque onglet doit cibler son panneau.
• Le panneau sélectionné porte la classe DSFR correspondante.
• Testez la composition avec dsfr:tabs:list, dsfr:tabs:tab, dsfr:tabs:panel sans copier les templates internes.

Accessibilité navigation

• Le libellé de navigation doit être explicite avec ariaLabel ou un titre visible.
• La page courante doit être indiquée avec active, current ou aria-current selon le composant.
• Les panneaux contrôlés par JavaScript DSFR doivent avoir des id uniques et stables.

Intégration Symfony/Twig pour dsfr:tabs

• Composez avec les sous-composants publics dsfr:tabs:list, dsfr:tabs:tab, dsfr:tabs:panel quand le rendu doit être plus précis que les props.
• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:tabs quand ils concernent son nœud racine.

Checklist de recette

• navigation clavier complète
• état actif visible
• liaison aria-controls vers un élément existant
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.
Le composant rend en local mais pas en production	Vérifiez la licence avec php bin/console dsfr:license:validate.