Crea un percorso GOV.UK di domande e verifica delle risposte con la scala tipografica v6 corrente, spaziatura responsiva, colori funzionali, convalida collegata e un’integrazione Frontend concreta.
Guida OpenDesign8 capitoli37 voci di riferimentoGuida applicativa originale
01
Sistema di design GOV.UK Anteprima dell’interfaccia
Invia i campi vuoti, segui i collegamenti agli errori, correggi le risposte e modifica un valore dalla schermata di riepilogo. Nessuna informazione lascia la pagina.
Richiesta di informazioni su un evento: domanda, convalida e controllo delle risposteApri l’esempio completo
GOV.UK Frontend 6.5.1 nativo CSS, Button ed ErrorSummary JavaScript, forniti localmente. Font alternativo Helvetica; convalida del modulo e navigazione di revisione originali, solo locali. · Riferimento per l’implementazione
02
Sistema di design GOV.UK Riferimento di progettazione
GOV.UK Frontend 6.5.1 e documentazione attuale della versione 6, consultati il 3 ottobre 2026. I valori esadecimali sono un’istantanea di riferimento; in produzione è preferibile usare le funzioni Sass con nome. L’anteprima carica localmente il CSS e il JavaScript ufficiali, con un font alternativo e un’identità indipendente.
Un riferimento alla versione 6 con identità indipendente
Questo riferimento usa la documentazione della versione 6, che include caratteri più grandi sugli schermi piccoli e colori funzionali rivisti. Uno screenshot meno recente può quindi mostrare valori diversi. La tabella qui sopra riporta i valori predefiniti documentati attualmente, senza mescolare versioni diverse.
Lo studio interattivo riguarda una richiesta immaginaria di informazioni su un evento comunitario. Non usa una corona, il marchio GOV.UK, il font Transport né un endpoint reale per l’invio. Il contenuto dell’attività e le regole di convalida locale sono scelte applicative; la struttura dei componenti si basa sugli esempi ufficiali collegati.
Per un servizio idoneo su service.gov.uk, GDS Transport fa parte dell’implementazione ufficiale. I servizi pubblici su altri domini devono usare un altro carattere tipografico. Questo studio indipendente segue l’alternativa consigliata Helvetica Neue, Helvetica, Arial, sans-serif; cambiare font non richiede di rinunciare alla gerarchia del sistema.
Sistema di design GOV.UK Tipografia e ritmo di lettura
Usa la coppia completa di dimensione e interlinea
Usa govuk-heading-l per la domanda della richiesta e govuk-body per il testo di supporto. Sugli schermi piccoli il titolo è 27/30px; su quelli più grandi diventa 36/40px. Nella versione 6 il testo del corpo resta 19/25px. Usare 16px per il testo del corpo sugli schermi piccoli riprodurrebbe il comportamento precedente, non quello di questo riferimento.
La tabella della scala include entrambe le dimensioni perché uno screenshot a una sola larghezza non basta a definire la regola reattiva. Il CSS di produzione usa unità relative. Una classe come govuk-heading-l determina l’aspetto, non se l’elemento semantico debba essere h1 o 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); }
Sistema di design GOV.UK Spaziatura e larghezza della pagina
Le unità reattive non corrispondono a pixel fissi
L’unità 6 è utile tra i gruppi di domande: equivale a 20px su uno schermo stretto e a 30px oltre il breakpoint tablet. L’helper statico govuk-spacing(6) restituisce 30px a qualsiasi larghezza. Scegliere l’helper cambia quindi il comportamento, anche se le due versioni appaiono identiche su desktop.
Il contenitore standard ha una larghezza massima di 1020px. Al suo interno, una colonna a due terzi limita il flusso delle domande, mantenendo allineata la struttura esterna della pagina. Sugli schermi piccoli, il layout si dispone naturalmente in verticale. La nostra anteprima mantiene questa gerarchia di lettura, invece di distribuire ogni campo in una scheda tipo dashboard.
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>
Usa i ruoli invece di riprodurre vecchi screenshot
Nella versione 6 il colore funzionale per i link è #1a65a6 e quello per gli errori è #ca3535. In una vera compilazione Sass, usa govuk-functional-colour("link") e govuk-functional-colour("error"), così un aggiornamento può recepire la palette upstream. Questi ruoli funzionali non equivalgono alla scelta di un generico colore rosso o blu per un’illustrazione.
Il giallo è riservato all’indicatore di focus. Non dovrebbe diventare il colore predefinito per la selezione o un accento promozionale. L’anteprima abbina il giallo a un testo scuro e a un bordo scuro ben visibile; un errore è indicato dal testo e dalla posizione, non soltanto dal rosso.
L’esempio di input combina govuk-form-group, govuk-label, govuk-hint e govuk-input. L’etichetta fa riferimento all’ID dell’input; aria-describedby punta all’hint. In caso di errore, aggiungi anche l’ID del messaggio di errore, oltre alle classi di errore. Un bordo rosso senza questa relazione è una riproduzione incompleta.
Questa richiesta riguarda il nome di un evento e un’email di contatto. Sono due valori distinti, ciascuno con la propria etichetta, all’interno di un’unica attività breve; non è un invito a collocare ogni campo in una pagina separata. Nell’anteprima entrambi sono obbligatori solo per mostrare la convalida: non si tratta di un requisito reale per ottenere un’autorizzazione.
Etichetta persistente: Nome dell’evento.
Indicazione persistente: Usa il nome riportato nelle informazioni sul tuo evento.
Errore correggibile: Inserisci il nome di un evento.
Il markup nativo e il comportamento dell’applicazione hanno funzioni diverse
GOV.UK Frontend applica gli stili ai componenti e ne migliora il comportamento. Non stabilisce quali email siano accettabili per questo servizio, non salva una bozza e non riceve richieste. Nell’anteprima, JavaScript convalida i due campi e conserva i relativi valori solo nella pagina corrente. Ricaricando la pagina, lo studio viene azzerato.
Sistema di design GOV.UK Correzione degli errori tramite link
Trasforma il riepilogo in un percorso per correggere gli errori
Dopo aver selezionato Continua in presenza di errori, mostra il riepilogo prima del modulo e sposta lì il focus. Ogni link nell’elenco porta alla risposta corrispondente. Se si tratta di un singolo campo di testo, il link punta all’ID dell’input; per un gruppo di opzioni, dovrebbe puntare al primo controllo pertinente, come indicato nelle linee guida ufficiali.
Per applicare i miglioramenti, il riepilogo nativo usa data-module="govuk-error-summary". L’anteprima inserisce il riepilogo solo in caso di errori di convalida, quindi crea ErrorSummary dal modulo locale 6.5.1. La libreria gestisce lo spostamento del focus e la navigazione tramite link; l’applicazione fornisce i messaggi, conserva i valori e rimuove gli errori non più attuali.
Prova il percorso effettivo per correggere gli errori
Seleziona Continua lasciando vuoti entrambi i campi. Segui il link dell’errore relativo al nome dell’evento, inserisci un titolo di fantasia, quindi inserisci un’email non valida. Seleziona di nuovo Continua: dovrebbe apparire solo l’errore rimanente e il titolo dovrebbe essere conservato. Correggi l’indirizzo per raggiungere la schermata di riepilogo. In questo modo è visibile il comportamento previsto per ogni stato, invece di mostrare un errore d’esempio permanente.
Sistema di design GOV.UK Verifica le risposte e modifica
Usa un elenco di definizioni, non una tabella di dati
La schermata di verifica delle risposte contiene un govuk-summary-list. Ogni riga ha una chiave dt, un valore dd e un’area dd per le azioni. Un’etichetta nascosta dopo «Modifica» specifica a quale risposta si riferisce. I nomi degli eventi più lunghi vanno a capo nel valore senza nascondere il link per modificarli.
L’azione «Modifica» ripristina il modulo e sposta il focus sul campo selezionato. Proseguendo, i dati vengono nuovamente convalidati e si torna alla schermata di riepilogo aggiornata. Il percorso di ritorno è gestito dal codice dell’applicazione; il sistema di progettazione fornisce la struttura di presentazione.
Questo studio termina con la schermata di riepilogo, perché nessun servizio riceve i dati. Una vera pagina di verifica delle risposte precede l’invio effettivo e deve mostrare le informazioni che verranno inviate. Un’applicazione con dichiarazioni o una conferma da parte del backend richiede ulteriore logica di servizio: un riquadro verde non può produrre quel risultato.
Completa le due risposte d’esempio e continua per visualizzare la schermata di riepilogo.
Seleziona «Modifica il nome dell’evento» e modifica solo quella risposta.
Continua e verifica che il titolo corretto e l’email conservata siano entrambi presenti.
La configurazione seguente usa govuk-frontend@6 e Dart Sass con l’importatore di pacchetti Node. Compila la configurazione documentata dei font non brandizzati e copia la distribuzione browser di JavaScript. Inserisci nel repository il file di lock risolto, così il progetto reale registra la versione esatta.
L’esempio non carica il font Transport né usa risorse grafiche governative. Un servizio autorizzato a usare il brand deve inoltre fornire le risorse ufficiali tramite il percorso documentato. Le applicazioni che usano un altro strumento di build possono mantenere lo stesso modulo Sass e lo stesso punto di ingresso initAll, adattando il bundling.
Inizializza dopo aver inserito il markup dei componenti
L’anteprima autonoma esegue CSS e JavaScript ufficiali, copiati localmente alla versione 6.5.1. Una personalizzazione dei font, limitata all’ambito dello studio, sostituisce Transport ovunque. La convalida del modulo e la schermata di riepilogo sono codice dell’applicazione; il miglioramento di Button ed ErrorSummary proviene dalla libreria. La ricetta di build Sass separata documenta la configurazione preferibile e personalizzabile; questa compilazione non è stata eseguita qui.
Sistema di design GOV.UK Esempi di componenti del sistema di progettazione
Campo di testo: etichetta, indicazione ed errore in linea
Nello stato di errore, l’esempio aggiunge la classe modificatrice di errore al gruppo e all’input. La descrizione dell’input associa tramite ID l’indicazione persistente e l’errore corrente.
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>
Nello stato valido, rimuovi il paragrafo dell’errore, le classi di errore e l’ID dell’errore da aria-describedby.
Conserva il valore effettivo quando la convalida non riesce; usa output server sottoposto a escape oppure l’assegnazione di testo/valore al DOM.
Riepilogo degli errori: navigazione alla risposta
Inserisci il riepilogo prima del contenuto della domanda. Il messaggio deve corrispondere all’errore in linea e il link deve puntare all’input, non a un contenitore non pertinente.
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>
In un’implementazione nativa, l’inizializzazione di Frontend gestisce il comportamento di focus del riepilogo.
Nello studio interattivo, dopo aver inserito il riepilogo degli errori a seguito di ogni convalida non riuscita viene creato un nuovo ErrorSummary; la convalida dell’applicazione resta separata.
Verifica le risposte: elenco di riepilogo semantico
Un elenco di definizioni associa l’etichetta della risposta al suo valore e alla destinazione specifica per modificarlo. Il suffisso nascosto permette di distinguere i link «Modifica» ripetuti.
Il parametro returnTo è una convenzione dell’applicazione usata qui, non un’API di Frontend API.
Dopo la modifica, torna alla schermata di riepilogo lasciando intatte tutte le altre risposte.
Esempio autonomo completo
Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite 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>
Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale.
Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima.
04
Sistema di design GOV.UK Configurazione dell’agente AI
Punto di partenza per l’implementazione
Inserisci separatamente i comandi shell, il contenuto di app.scss e gli snippet HTML nelle posizioni indicate. L’anteprima usa risorse ufficiali 6.5.1 copiate localmente con una personalizzazione dei font; la ricetta di build Sass è documentata, ma non è stata compilata in questo workspace. Il file ZIP completo dell’esempio funzionante, disponibile in Sources, include le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/gov-uk.html. Non aprire con file:// gli esempi basati su moduli.
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 per il tuo progetto
Prompt per l’agente
Realizza la richiesta sull’evento con due campi usando GOV.UK Frontend v6 e la configurazione non brandizzata dei font Helvetica descritta in questa guida. Usa le strutture effettive di form-group, input, error-summary e summary-list, gli errori in linea collegati, la conservazione delle risposte, i link «Modifica» mirati e il completamento limitato alla schermata di riepilogo. Applica la tipografia e la spaziatura adattive documentate tramite le classi Frontend. Mantieni l’identità reale del progetto e non simulare un invio ufficiale né inventare un risultato del backend. Verifica gli stati con campi vuoti, email non valida, dati corretti, riepilogo e modifica di una risposta.
05
Sistema di design GOV.UK Fonti e ambito
Studio applicativo indipendente OpenDesign basato sui componenti CSS e su JavaScript di GOV.UK Frontend 6.5.1. Non implica l’uso di un logo governativo o del font Transport, né l’esistenza di un servizio ufficiale, di un invio reale o di una certificazione di conformità. Le regole del modulo e la navigazione nella schermata di riepilogo sono codice originale dell’applicazione.
