Référence

Cette page liste les points d'entrée publics du bundle : composants Twig, types de formulaires, commandes et intégrations Symfony.

Syntaxe Twig

Les composants se rendent avec la syntaxe Symfony UX Twig Component :

<twig:dsfr:button label="Enregistrer" />

Les tableaux et objets doivent être passés avec : pour conserver leur type :

<twig:dsfr:table
  id="users"
  caption="Utilisateurs"
  :headers="['Nom', 'Statut']"
  :rows="[
    ['Alice Martin', 'Actif'],
    ['Karim Benali', 'En attente']
  ]"
/>

N'utilisez pas de blocs Twig nommés comme footer, rows ou panels à l'intérieur des composants. Pour les composants composables, utilisez les sous-composants fournis.

Composition

<twig:dsfr:modal id="confirm-delete">
  <twig:dsfr:modal:content>
    <twig:dsfr:modal:title modalId="confirm-delete">Supprimer le dossier</twig:dsfr:modal:title>
    <p>Cette action est définitive.</p>
  </twig:dsfr:modal:content>
  <twig:dsfr:modal:footer>
    <twig:dsfr:button label="Supprimer" type="button" />
    <twig:dsfr:button label="Annuler" variant="secondary" type="button" />
  </twig:dsfr:modal:footer>
</twig:dsfr:modal>

<twig:dsfr:card horizontal>
  <twig:dsfr:card:header src="/images/service.jpg" alt="" />
  <twig:dsfr:card:body title="Démarche en ligne" href="/demarches" description="Accéder au service." />
  <twig:dsfr:card:footer>
    <twig:dsfr:badge label="Nouveau" type="new" />
  </twig:dsfr:card:footer>
</twig:dsfr:card>

Composants Community

Les composants Community sont utilisables sans licence Pro :

Composant	Usage
`dsfr:button`	Bouton ou lien stylé DSFR
`dsfr:link`	Lien DSFR, interne ou externe
`dsfr:tag`	Tag statique, lien, sélectionnable ou supprimable
`dsfr:badge`	Badge d'état ou de catégorie
`dsfr:alert`	Alerte information, succès, avertissement ou erreur
`dsfr:highlight`	Mise en exergue courte
`dsfr:breadcrumb`	Fil d'Ariane
`dsfr:pagination`	Pagination accessible
`dsfr:stepper`	Indicateur d'étapes
`dsfr:skip:links`	Liens d'évitement
`dsfr:container`	Conteneur DSFR standard ou fluide
`dsfr:grid:row`	Ligne de grille, gouttières et alignements
`dsfr:grid:col`	Colonne responsive et offsets

Composants Pro

Les composants Pro sont visibles en développement local. En production, ils nécessitent une licence valide.

Famille	Composants
Accordéon	`dsfr:accordion`, `dsfr:accordion:group`
Actions	`dsfr:button:group`, `dsfr:download`, `dsfr:france:connect`, `dsfr:links:group`, `dsfr:share`, `dsfr:tag:group`
Contenu	`dsfr:callout`, `dsfr:card`, `dsfr:card:header`, `dsfr:card:body`, `dsfr:card:content`, `dsfr:card:title`, `dsfr:card:description`, `dsfr:card:footer`, `dsfr:composition`, `dsfr:media:content`, `dsfr:quote`, `dsfr:table`, `dsfr:table:head`, `dsfr:table:body`, `dsfr:table:row`, `dsfr:table:cell`, `dsfr:table:head:cell`, `dsfr:tabs`, `dsfr:tabs:list`, `dsfr:tabs:tab`, `dsfr:tabs:panel`, `dsfr:tile`, `dsfr:tooltip`, `dsfr:transcription`
Feedback	`dsfr:badge:group`, `dsfr:notice`
Formulaires	`dsfr:checkbox`, `dsfr:combobox`, `dsfr:fieldset`, `dsfr:fieldset:element`, `dsfr:input`, `dsfr:password`, `dsfr:radio`, `dsfr:range`, `dsfr:search:bar`, `dsfr:segmented`, `dsfr:select`, `dsfr:textarea`, `dsfr:toggle`, `dsfr:toggle:group`, `dsfr:upload`
Mise en page	`dsfr:display`, `dsfr:follow`, `dsfr:footer`, `dsfr:footer:top`, `dsfr:footer:brand`, `dsfr:footer:content`, `dsfr:footer:partners`, `dsfr:footer:bottom`, `dsfr:header`, `dsfr:header:brand`, `dsfr:header:tools`, `dsfr:logo`, `dsfr:translate`
Navigation	`dsfr:breadcrumb:item`, `dsfr:dropdown`, `dsfr:nav`, `dsfr:nav:item`, `dsfr:nav:menu`, `dsfr:nav:mega`, `dsfr:pagination`, `dsfr:sidemenu`, `dsfr:stepper`, `dsfr:summary`, `dsfr:tabnav`
Vie privée	`dsfr:consent`, `dsfr:consent:placeholder`
Surcouches	`dsfr:modal`, `dsfr:modal:title`, `dsfr:modal:content`, `dsfr:modal:footer`

Contrat d'accessibilité

Les composants rendent les classes DSFR et les relations ARIA attendues lorsque les props nécessaires sont fournies. Les points suivants restent sous la responsabilité de l'application :

fournir un caption aux tableaux de données ;
relier les boutons de disclosure aux panneaux avec des id stables ;
donner un nom accessible aux modales avec title ou dsfr:modal:title ;
conserver des alternatives d'image utiles ou vides selon que l'image est informative ou décorative ;
vérifier les pages réelles avec le profiler DSFR et l'inspecteur d'accessibilité du navigateur.

Aide à l'intégration

Props et attributs HTML

Les props déclarées par un composant sont validées et normalisées. Les attributs non déclarés sont transmis au nœud racine quand le template le permet :

<twig:dsfr:alert
  type="info"
  title="Information"
  text="Message visible."
  class="fr-mt-3w"
  data-controller="tracking"
/>

Pour les tableaux et objets, utilisez toujours :. Sans :, Twig transmet une chaîne et non une structure :

<twig:dsfr:nav :items="[
  {label: 'Accueil', href: '/'},
  {label: 'Dossiers', href: '/dossiers', active: true}
]" />

Composition avec sous-composants

N'utilisez pas de macros ni d'include pour composer les composants du bundle. Les composants complexes exposent des sous-composants publics :

Composant	Sous-composants
Carte	`dsfr:card:header`, `body`, `content`, `title`, `description`, `footer`
Modale	`dsfr:modal:title`, `content`, `footer`
Tableau	`dsfr:table:head`, `body`, `row`, `cell`, `head:cell`
Onglets	`dsfr:tabs:list`, `tab`, `panel`
Grille	`dsfr:container`, `dsfr:grid:row`, `dsfr:grid:col`

Diagnostic

Situation	Action
Le rendu est bloqué en production	Lancez `php bin/console dsfr:license:validate` et vérifiez le domaine courant.
Le JavaScript DSFR signale un nom accessible manquant	Ajoutez `title`, `ariaLabel`, `caption`, `legend` ou `aria-labelledby` selon le composant.
Un bouton contrôle le mauvais panneau	Assurez-vous que `aria-controls` pointe vers un `id` unique et présent dans la page.
Une page contient beaucoup de composants	Ouvrez le profiler DSFR : il affiche les composants rendus, leur tier, leurs props et les alertes d'accessibilité détectables côté serveur.

Types de formulaires Symfony

use Nalabdou\Dsfr\Form\Type\DsfrInputType;
use Nalabdou\Dsfr\Form\Type\DsfrSubmitType;

$builder
    ->add('email', DsfrInputType::class, [
        'label' => 'Adresse électronique',
        'help' => 'Format attendu : nom@example.fr',
    ])
    ->add('submit', DsfrSubmitType::class, [
        'label' => 'Envoyer',
    ]);

Types disponibles :

Type	Parent Symfony
`DsfrInputType`	Champ texte
`DsfrTextareaType`	Zone de texte
`DsfrSelectType`	Liste déroulante
`DsfrCheckboxType`	Case à cocher
`DsfrRadioType`	Bouton radio
`DsfrToggleType`	Interrupteur
`DsfrSearchType`	Barre de recherche
`DsfrSubmitType`	Bouton de soumission

Commandes

php bin/console debug:dsfr-components
php bin/console debug:dsfr-components --tier=community
php bin/console debug:dsfr-components --tier=pro
php bin/console dsfr:license:validate
php bin/console dsfr:license:validate config/dsfr_bundle.lic

La commande de validation affiche le titulaire, le profil tarifaire, le niveau, le périmètre de sites couverts, tous les hôtes autorisés et le statut de la licence.

Profiler

En environnement de développement avec le Web Profiler Symfony, le collecteur dsfr_bundle affiche :

le nombre de composants rendus ;
la répartition Community / Pro ;
l'état de la licence ;
les props utiles au diagnostic ;
un lien vers les informations d'achat si une page utilise des composants Pro sans licence.

Syntaxe Twig​

Composition​

Composants Community​

Composants Pro​

Contrat d'accessibilité​

Aide à l'intégration​

Props et attributs HTML​

Composition avec sous-composants​

Diagnostic​

Types de formulaires Symfony​

Commandes​

Profiler​