Services publics et administration · Nouvelle ressource
Système de design GOV.UK.
Créez un parcours de questions et de vérification des réponses dans le style de GOV.UK, avec l’échelle typographique actuelle de la v6, un espacement adaptatif, des couleurs fonctionnelles, une validation liée et une intégration concrète au front-end.
Guide OpenDesign8 chapitres37 entrées de référenceGuide de l’application d’origine
01
Aperçu de l’interface système de design GOV.UK
Soumettez des champs vides, suivez les liens vers les erreurs, corrigez les réponses et modifiez une valeur depuis l’écran de récapitulatif. Aucune information ne quitte la page.
Demande de renseignements sur un événement : question, validation et vérification des réponsesOuvrir l’exemple complet
GOV.UK Frontend 6.5.1 natif CSS, Button et ErrorSummary JavaScript, servis localement. Police Helvetica alternative ; validation locale originale du formulaire et navigation dans le récapitulatif. · Référence de mise en œuvre
02
Référence de conception système de design GOV.UK
GOV.UK Frontend 6.5.1 et documentation v6 actuelle, vérifiés le 3 octobre 2026. Les valeurs hexadécimales constituent un instantané de référence ; en production, privilégiez les fonctions Sass nommées. L’aperçu charge les ressources locales officielles CSS et JavaScript avec une police alternative et une identité indépendante.
Cette référence s’appuie sur la documentation v6, notamment sur sa typographie plus grande sur petit écran et ses couleurs fonctionnelles révisées. Une ancienne capture d’écran peut donc afficher des valeurs différentes. Le tableau ci-dessus indique les valeurs par défaut documentées actuellement, sans mélanger discrètement les versions.
L’étude en ligne porte sur une demande fictive concernant un événement communautaire. Elle n’utilise ni couronne, ni logotype GOV.UK, ni police Transport, ni véritable point de terminaison de soumission. Le contenu de la tâche et les règles de validation locale relèvent des choix de l’application ; la structure des composants s’appuie sur les exemples officiels associés.
Pour un service éligible sur service.gov.uk, GDS Transport fait partie de l’implémentation officielle. Les services publics sur d’autres domaines doivent utiliser une autre police. Cette étude indépendante suit la solution recommandée Helvetica Neue, Helvetica, Arial, sans-serif ; changer de police ne nécessite pas d’abandonner la hiérarchie du système.
Typographie et rythme de lecture système de design GOV.UK
Utilisez la paire complète taille et interligne
Utilisez govuk-heading-l pour la question et govuk-body pour le texte d’accompagnement. Sur les petits écrans, le titre est en 27/30px ; sur les écrans plus larges, il passe à 36/40px. En v6, le texte reste en 19/25px. Une taille de 16px pour le texte sur petit écran reproduirait le comportement d’une version antérieure plutôt que celui de cette référence.
Le tableau des tailles présente les deux valeurs, car une capture d’écran prise à une seule taille de fenêtre ne permet pas d’établir la règle responsive. En production, CSS utilise des unités relatives. Une classe telle que govuk-heading-l détermine l’apparence, mais pas si l’élément sémantique doit être un h1 ou un h2.
scss
.app-question-note {
@include govuk-font($size: 19);
}
// Size and line-height only, without changing the font family:
.app-existing-font { @include govuk-font-size($size: 19); }
Système de design GOV.UK Espacement et largeur de page
Les unités responsive ne correspondent pas à des pixels fixes
L’unité 6 convient entre des groupes de questions : elle donne 20px sur un écran étroit et 30px au-delà du seuil tablette. L’utilitaire statique govuk-spacing(6) renvoie 30px quelle que soit la largeur. Choisir l’utilitaire modifie donc le comportement, même si les deux versions ont le même rendu sur ordinateur.
Placez une colonne de lecture à l’intérieur du conteneur
Le conteneur standard a une largeur maximale de 1020px. À l’intérieur, une colonne de grille occupant les deux tiers limite la largeur des questions tout en conservant l’alignement de la structure générale de la page. Sur petit écran, la présentation s’empile naturellement. Notre aperçu conserve cette hiérarchie de lecture au lieu d’étaler chaque champ dans une carte de tableau de bord.
html
<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Tell us about the event</h1>
<!-- Question form -->
</div>
</div>
</main>
</div>
Utilisez des rôles plutôt que d’imiter d’anciennes captures d’écran
Dans v6, la couleur fonctionnelle des liens est #1a65a6 et celle des erreurs est #ca3535. Dans une véritable compilation Sass, utilisez govuk-functional-colour("link") et govuk-functional-colour("error") afin qu’une mise à niveau puisse reprendre la palette en amont. Ces rôles fonctionnels ne se confondent pas avec le choix d’une couleur générale rouge ou bleue pour une illustration.
Le jaune est réservé au focus. Il ne doit pas devenir la couleur par défaut d’une sélection ou d’un accent promotionnel. L’aperçu associe le jaune à un texte sombre et à un contour sombre bien visible ; une erreur reste identifiable par son texte et son emplacement, pas uniquement par le rouge.
L’exemple de saisie combine govuk-form-group, govuk-label, govuk-hint et govuk-input. Le libellé cible l’ID du champ ; aria-describedby pointe vers l’indication. En cas d’erreur, ajoutez également l’ID du message d’erreur, ainsi que les classes d’erreur. Une bordure rouge sans cette relation ne constitue pas une reproduction complète.
Cette demande regroupe le nom de l’événement et l’adresse e-mail de contact. Il s’agit de deux valeurs avec leurs propres libellés, réunies dans une courte démarche, et non d’une consigne visant à placer chaque champ sur une page distincte. Dans l’aperçu, les deux champs sont obligatoires uniquement pour illustrer la validation ; cela ne définit aucune exigence réelle de permis.
Libellé permanent : Nom de l’événement.
Indication permanente : Utilisez le nom indiqué dans les informations sur votre événement.
Message d’erreur permettant de corriger la saisie : Saisissez un nom d’événement.
Le balisage natif et le comportement de l’application ont des rôles différents
GOV.UK Frontend met en forme les composants et les enrichit. Il ne détermine pas quelles adresses e-mail sont acceptées par ce service, n’enregistre pas de brouillon et ne reçoit pas les demandes. Dans l’aperçu, JavaScript valide les deux champs et stocke leurs valeurs uniquement sur la page en cours. Le rechargement efface les données de l’étude.
Système de design GOV.UK Correction des erreurs par lien
Faites du résumé un raccourci vers la correction
Après une action Continuer qui échoue à la validation, affichez le résumé des erreurs avant le formulaire et déplacez le focus dessus. Chaque lien de la liste cible la réponse correspondante. Pour un champ de texte unique, ciblez son ID ; pour un choix groupé, ciblez le premier contrôle approprié, conformément aux recommandations officielles.
Le résumé natif utilise data-module="govuk-error-summary" pour son amélioration progressive. L’aperçu n’insère le résumé qu’en cas d’échec de la validation, puis instancie ErrorSummary à partir du module local 6.5.1. La bibliothèque gère le focus et la navigation par liens ; l’application fournit les messages, conserve les valeurs et supprime les erreurs obsolètes.
Cliquez sur Continuer en laissant les deux champs vides. Suivez le lien de l’erreur sur le nom de l’événement, saisissez un titre fictif, puis une adresse e-mail non valide. Cliquez de nouveau sur Continuer : seule l’erreur restante doit s’afficher et le titre doit être conservé. Corrigez l’adresse pour accéder à la vérification. Le comportement attendu est ainsi visible, au lieu d’afficher une erreur permanente dans un exemple.
Système de design GOV.UK Vérifier les réponses et les modifier
Utilisez une liste de définitions, pas un tableau de données
L’écran de vérification des réponses contient un govuk-summary-list. Chaque ligne comprend une clé dt, une valeur dd et une zone d’actions dd. Un libellé masqué après Modifier précise la réponse concernée. Les noms d’événement longs passent à la ligne dans la valeur sans masquer le lien de modification.
L’action de modification réaffiche le formulaire et place le focus sur le champ sélectionné. En continuant, la validation est relancée et la vérification affiche les réponses mises à jour. Le retour au formulaire relève du code de l’application ; le système de design fournit la structure de présentation.
Arrêtez-vous à la limite de ce qui est réellement pris en charge
Cette étude s’arrête à la vérification, car aucun service ne reçoit les données. Une véritable page de vérification précède l’action d’envoi et doit afficher les informations qui seront envoyées. Une application comportant des déclarations ou une confirmation côté serveur nécessite une logique de service supplémentaire ; un panneau vert ne peut pas produire ce résultat.
Complétez les deux réponses fictives, puis passez à la vérification.
Choisissez Modifier le nom de l’événement ; ne modifiez que cette réponse.
Continuez et vérifiez que le titre corrigé et l’adresse e-mail conservée sont tous deux présents.
La configuration ci-dessous utilise govuk-frontend@6 et Dart Sass avec l’importateur de paquets Node. Elle compile la configuration de polices sans marque documentée et copie la distribution du navigateur JavaScript. Validez le fichier de verrouillage résolu afin que la version exacte soit consignée dans un véritable projet.
L’exemple ne charge pas Transport et n’utilise pas d’images gouvernementales. Un service utilisant une marque officielle doit également servir les ressources officielles via le chemin d’accès documenté. Les applications qui utilisent un autre outil de compilation peuvent conserver le même module Sass et le même point d’entrée initAll, en adaptant leur empaquetage.
Initialisez les composants une fois leur balisage en place
L’aperçu autonome utilise les versions officielles copiées localement de CSS et JavaScript, en version 6.5.1. Une surcharge typographique de portée limitée remplace Transport dans toute l’étude. La validation du formulaire et l’écran de récapitulatif relèvent du code de l’application, tandis que l’amélioration de Button et d’ErrorSummary provient de la bibliothèque. La recette de compilation Sass distincte décrit la configuration configurable recommandée ; cette compilation n’a pas été exécutée ici.
Exemples de composants du système de design système de design GOV.UK
Champ de saisie : libellé, texte d’aide et erreur en ligne
L’état d’exemple ajoute le modificateur d’erreur au groupe et au champ de saisie. La description du champ associe, par leurs ID, le texte d’aide persistant et l’erreur actuelle.
html
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="event-name">Event name</label>
<div id="event-name-hint" class="govuk-hint">Use the name shown on your event information.</div>
<p id="event-name-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter an event name
</p>
<input class="govuk-input govuk-input--error" id="event-name"
name="eventName" type="text"
aria-describedby="event-name-hint event-name-error">
</div>
Dans l’état valide, supprimez le paragraphe d’erreur, les modificateurs d’erreur et l’ID de l’erreur dans aria-describedby.
Conservez la valeur réelle en cas d’échec de la validation ; utilisez une sortie serveur échappée ou l’affectation de texte/valeur au DOM.
Récapitulatif des erreurs : accéder à la réponse
Placez le récapitulatif avant le contenu de la question. Son message correspond à l’erreur en ligne et son lien cible le champ de saisie, et non un conteneur sans rapport.
html
<div class="govuk-error-summary" data-module="govuk-error-summary">
<div role="alert">
<h2 class="govuk-error-summary__title">There is a problem</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li><a href="#event-name">Enter an event name</a></li>
</ul>
</div>
</div>
</div>
Dans une implémentation native, l’initialisation du frontend fournit le comportement de mise au focus du récapitulatif.
Dans l’étude interactive, un nouvel ErrorSummary est créé après l’insertion de chaque récapitulatif d’échec de validation ; la validation de l’application reste distincte.
Vérifier les réponses : une liste récapitulative sémantique
Une liste de définitions associe le libellé de la réponse à sa valeur et à une destination de modification précise. Le suffixe masqué permet de distinguer les liens « Modifier » répétés.
Le paramètre returnTo est une convention de l’application utilisée ici, et non un élément de Frontend API.
Revenez de la modification au récapitulatif en conservant toutes les autres réponses.
Exemple autonome complet
Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via HTTP.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Event enquiry — OpenDesign component study</title><link rel="stylesheet" href="vendor/govuk-6.5.1/govuk-frontend.min.css"><style>
body{margin:0;background:#fff}body,body *,body *::before,body *::after{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}[hidden]{display:none!important}.study-header{border-bottom:1px solid #cecece;padding:15px 0;background:#f3f3f3}.study-header p{margin:0}.study-header strong{display:block;margin-bottom:5px}.study-note{border-top:1px solid #cecece;padding-top:20px;margin-top:30px}.study-actions{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}.govuk-summary-list__value{overflow-wrap:anywhere}main:focus,h1:focus{outline:none}.govuk-width-container{max-width:1020px}.study-tools{margin:20px 0}.study-tools button{font:inherit;background:none;border:0;padding:0;color:#1a65a6;text-decoration:underline;cursor:pointer}.study-tools button:focus{outline:3px solid #ffdd00;background:#ffdd00;color:#0b0c0c}.study-header .govuk-body-s{max-width:75ch}
</style></head><body class="govuk-template__body"><script>document.body.className+=' js-enabled'+('noModule' in HTMLScriptElement.prototype?' govuk-frontend-supported':'');</script>
<a class="govuk-skip-link" href="#main-content">Skip to main content</a>
<header class="study-header"><div class="govuk-width-container"><p class="govuk-body-s"><strong>OpenDesign · Component study</strong>GOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.</p></div></header>
<main class="govuk-width-container govuk-main-wrapper" id="main-content"><div class="govuk-grid-row"><div class="govuk-grid-column-two-thirds">
<section id="questions"><div id="errors"></div><h1 class="govuk-heading-l" id="question-title" tabindex="-1">Tell us about the event</h1><p class="govuk-body">Enter fictional details to try linked validation and the check-answers pattern.</p>
<form id="event-form" novalidate>
<div class="govuk-form-group" id="name-group"><label class="govuk-label" for="event-name">Event name</label><div class="govuk-hint" id="event-name-hint">Use the name shown on your event information.</div><input class="govuk-input" id="event-name" name="eventName" type="text" aria-describedby="event-name-hint"></div>
<div class="govuk-form-group" id="email-group"><label class="govuk-label" for="contact-email">Contact email</label><div class="govuk-hint" id="contact-email-hint">For example, [email protected]. Use a fictional address.</div><input class="govuk-input" id="contact-email" name="email" type="email" spellcheck="false" autocomplete="email" aria-describedby="contact-email-hint"></div>
<button class="govuk-button" data-module="govuk-button" type="submit">Continue to check answers</button>
</form><div class="study-tools govuk-body-s"><button id="fill" type="button">Use example details</button></div></section>
<section id="review" hidden><a class="govuk-back-link" href="#questions" id="back">Back</a><h1 class="govuk-heading-l govuk-!-margin-top-6" tabindex="-1" id="review-title">Check your answers</h1><dl class="govuk-summary-list"><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Event name</dt><dd class="govuk-summary-list__value" id="review-name"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#event-name" data-field="event-name">Change<span class="govuk-visually-hidden"> event name</span></a></dd></div><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Contact email</dt><dd class="govuk-summary-list__value" id="review-email"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#contact-email" data-field="contact-email">Change<span class="govuk-visually-hidden"> contact email</span></a></dd></div></dl><h2 class="govuk-heading-m">This example ends at review</h2><p class="govuk-body">Nothing has been submitted. Your answers stay in this page until it is reset or reloaded.</p><button class="govuk-button govuk-button--secondary" data-module="govuk-button" id="reset" type="button">Start again</button></section>
<aside class="study-note"><h2 class="govuk-heading-s">Try the recovery path</h2><ol class="govuk-list govuk-list--number"><li>Continue with empty fields to show the error summary.</li><li>Follow an error link, enter a title and an invalid email.</li><li>Correct the email, then change an answer from review.</li></ol><p class="govuk-body-s">Native component CSS and ErrorSummary behaviour. Local application logic only. No government logo, Transport font, external request or stored account.</p><p class="govuk-body-s"><a class="govuk-link" href="https://design-system.service.gov.uk/components/error-summary/" target="_blank" rel="noreferrer">Official error summary reference</a> · <a class="govuk-link" href="vendor/govuk-6.5.1/LICENSE.txt">Frontend licence</a></p></aside>
</div></div></main><script type="module">
import {initAll, ErrorSummary} from './vendor/govuk-6.5.1/govuk-frontend.min.js';
initAll();
const q=document.querySelector('#questions'),r=document.querySelector('#review'),form=document.querySelector('#event-form'),holder=document.querySelector('#errors');
const fields=[{id:'event-name',group:'name-group',empty:'Enter an event name'},{id:'contact-email',group:'email-group',empty:'Enter a contact email',invalid:'Enter an email address in the correct format, like [email protected]'}];
function clearErrors(){holder.replaceChildren();for(const f of fields){document.getElementById(f.group).classList.remove('govuk-form-group--error');const input=document.getElementById(f.id);input.classList.remove('govuk-input--error');input.removeAttribute('aria-invalid');input.setAttribute('aria-describedby',f.id+'-hint');document.getElementById(f.id+'-error')?.remove();}document.title='Event enquiry — OpenDesign component study';}
function edit(id='event-name'){r.hidden=true;q.hidden=false;document.getElementById(id).focus();}
form.addEventListener('submit',event=>{event.preventDefault();clearErrors();const errors=[];for(const f of fields){const input=document.getElementById(f.id);const value=input.value.trim();const message=!value?f.empty:(f.id==='contact-email'&&(!input.validity.valid||!value.includes('@'))?f.invalid:null);if(message){errors.push({id:f.id,message});document.getElementById(f.group).classList.add('govuk-form-group--error');input.classList.add('govuk-input--error');input.setAttribute('aria-invalid','true');input.setAttribute('aria-describedby',f.id+'-hint '+f.id+'-error');const p=document.createElement('p');p.id=f.id+'-error';p.className='govuk-error-message';const hidden=document.createElement('span');hidden.className='govuk-visually-hidden';hidden.textContent='Error: ';p.append(hidden,document.createTextNode(message));input.before(p);}}
if(errors.length){const summary=document.createElement('div');summary.className='govuk-error-summary';summary.dataset.module='govuk-error-summary';summary.innerHTML='<div role="alert"><h2 class="govuk-error-summary__title">There is a problem</h2><div class="govuk-error-summary__body"><ul class="govuk-list govuk-error-summary__list"></ul></div></div>';for(const err of errors){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+err.id;a.textContent=err.message;li.append(a);summary.querySelector('ul').append(li);}holder.append(summary);new ErrorSummary(summary);document.title='Error: Event enquiry — OpenDesign component study';return;}
document.getElementById('review-name').textContent=document.getElementById('event-name').value;document.getElementById('review-email').textContent=document.getElementById('contact-email').value;q.hidden=true;r.hidden=false;document.getElementById('review-title').focus();document.title='Check your answers — OpenDesign component study';});
document.querySelectorAll('.change').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();edit(a.dataset.field)}));document.getElementById('back').addEventListener('click',e=>{e.preventDefault();edit()});document.getElementById('fill').addEventListener('click',()=>{clearErrors();document.getElementById('event-name').value='Riverside community picnic';document.getElementById('contact-email').value='[email protected]';document.getElementById('event-name').focus()});document.getElementById('reset').addEventListener('click',()=>{form.reset();clearErrors();edit();document.getElementById('question-title').focus()});
</script></body></html>
Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement.
Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu.
04
Configuration de l’agent IA système de design GOV.UK
Point de départ de l’implémentation
Placez séparément les commandes shell, le contenu de app.scss et les fragments HTML aux emplacements indiqués. L’aperçu utilise des ressources officielles 6.5.1 copiées localement, avec une surcharge typographique ; cette recette de compilation Sass est documentée, mais n’a pas été compilée dans cet espace de travail. L’archive ZIP complète de l’exemple fonctionnel, disponible dans Sources, fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-la, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/gov-uk.html. N’ouvrez pas les exemples utilisant des modules via file://.
sh / scss / html
# Run in a project directory
npm install [email protected]
npm install --save-dev sass
mkdir -p public/assets
# Save the following as app.scss
@use "pkg:govuk-frontend" as * with (
$govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif)
);
# Compile, then copy the browser module
npx sass --pkg-importer=node app.scss public/assets/app.css
cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/
<!-- In the HTML head -->
<link rel="stylesheet" href="/assets/app.css">
<!-- At the start of body -->
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- After the question / summary markup -->
<script type="module">
import { initAll } from '/assets/govuk-frontend.min.js';
initAll();
</script>
Un prompt pour votre projet
Prompt pour l’agent IA
Mettez en œuvre le formulaire de demande d’événement à deux champs avec GOV.UK Frontend v6 et la configuration de police Helvetica sans identité de marque décrite dans ce guide. Utilisez les structures réelles form-group/input/error-summary et summary-list, des erreurs en ligne associées, la conservation des réponses, des liens « Modifier » ciblés et une finalisation limitée au récapitulatif. Appliquez les règles typographiques et d’espacement adaptatives documentées au moyen des classes Frontend. Conservez l’identité réelle du projet et ne créez ni soumission officielle ni résultat de backend inventé. Vérifiez les états : champs vides, adresse e-mail invalide, correction, récapitulatif et modification d’une réponse.
05
Sources et périmètre système de design GOV.UK
Étude indépendante d’une application OpenDesign utilisant les composants CSS et JavaScript de GOV.UK Frontend 6.5.1. Aucun logo gouvernemental, aucune police Transport, aucun service officiel, aucune soumission réelle ni certification de conformité ne sont sous-entendus. Les règles du formulaire et la navigation du récapitulatif sont du code original de l’application.
