Componi gruppi di selezione HDS nativi, colori semantici per i messaggi e riepiloghi degli errori collegati in un flusso completo, eseguibile in locale, di revisione e correzione.
Sistema di progettazione sistema di design Helsinki: Core e limiti di React
Scegli l’implementazione che usi davvero
HDS fornisce Core CSS, componenti React e token di progettazione. Questo esempio usa hds-core5.2.2, il pacchetto scaricato e analizzato per la dimostrazione. I numeri delle release del repository possono differire dalla versione di un singolo pacchetto, quindi un tag più recente del repository non dimostra che questo esempio usi quella versione.
Core fornisce variabili di base e stili per i singoli componenti. Non include lo stato applicativo del modulo usato qui. La logica di selezione, convalida, revisione e modifica è originale JavaScript ed è realizzata con input nativi HTML e il modello documentato per i moduli HDS.
Sistema di progettazione sistema di design Helsinki: tipografia e limiti dei font
Usa il fallback nativo in modo trasparente
La variabile del font indica prima HelsinkiGroteskPro, seguito da Arial e sans-serif. Il README di Core esclude esplicitamente i file dei font Helsinki per ragioni di copyright. L’anteprima mantiene il fallback, senza scaricare font soggetti a restrizioni né dichiarare implicitamente una resa con il marchio esatto.
Il token di base del corpo del testo è 16px con interlinea di 1.5. heading-xl è 48px e il token mobile è 40px; l’anteprima passa dall’uno all’altro a 576px. Questi sono valori nominati, ma una variabile CSS che contiene un breakpoint non attiva automaticamente il comportamento responsive. La media rule esplicita appartiene alla composizione dell’applicazione.
Sistema di progettazione sistema di design Helsinki: due sistemi di spaziatura
Separa gli spazi tra componenti dal ritmo della pagina
HDS distingue una sequenza di spaziatura per i componenti da una sequenza più ampia per il layout. La prima comprende 2, 4, 8, 12, 16 e 24px, per poi crescere fino a 72px. La spaziatura del layout arriva a 128px. Usare spacing-layout-xl come spazio tra checkbox adiacenti sovraccaricherebbe il gruppo, anche se la variabile è valida.
Il componente checkbox definisce un controllo di 24px, un bordo da 2px e un contorno di focus da 3px. L’altezza minima del pulsante è 56px e gli angoli sono squadrati. L’anteprima conserva queste forme native; il modulo è contenuto in un contenitore applicativo con larghezza massima pari ai 720px di riferimento pubblicati.
Sistema di progettazione sistema di design Helsinki: ruoli dei colori in un modulo
Non confondere i nomi della palette con quelli del feedback
Il tema interattivo predefinito usa il blu Bus, mentre il contorno del focus usa il blu Coat of arms. Il feedback di errore usa una tonalità berry distinta e una superficie di errore chiara. Un accento della palette come Copper può essere adatto all’intestazione, ma non dovrebbe sostituire il ruolo di errore solo perché risalta di più.
L’errore in linea del gruppo di selezione combina testo, un bordo sinistro a contrasto e un’icona. Non si affida soltanto al rosso. I collegamenti nel riepilogo degli errori usano il consueto colore interattivo, così è facile riconoscere il percorso per tornare al campo.
Sistema di progettazione sistema di design Helsinki: anatomia di un gruppo di checkbox
Un gruppo comprende una domanda e più risposte
La struttura nativa è composta da un fieldset con legend, un contenitore per gli elementi e singoli wrapper per le checkbox. Ogni input precede immediatamente la propria etichetta, perché il foglio di stile sfrutta questa relazione per gli stati visivi. La legend spiega cosa selezionare; ogni etichetta indica un argomento disponibile.
La demo richiede almeno due argomenti: è una regola originale dell’applicazione. Le checkbox sono appropriate perché è possibile mantenere selezionate più opzioni. Un gruppo di pulsanti radio esprimerebbe una scelta esclusiva e sarebbe in contrasto con il compito. Il suggerimento del fieldset resta visibile prima e dopo la convalida.
html
<fieldset class="hds-selection-group" aria-describedby="topics-hint">
<legend class="hds-selection-group__legend">Topics for your afternoon</legend>
<p id="topics-hint">Choose at least two topics.</p>
<div class="hds-selection-group__items hds-selection-group__items--vertical">
<div class="hds-checkbox">
<input class="hds-checkbox__input" type="checkbox" id="repair" value="Repair and reuse">
<label class="hds-checkbox__label" for="repair">Repair and reuse</label>
</div>
<div class="hds-checkbox">
<input class="hds-checkbox__input" type="checkbox" id="garden" value="Urban gardening">
<label class="hds-checkbox__label" for="garden">Urban gardening</label>
</div>
</div>
</fieldset>
Sistema di progettazione sistema di design Helsinki: errori collegati e ripristino
Porta il focus sul problema, poi conserva i dati inseriti
HDS consiglia di mostrare un riepilogo degli errori sotto il titolo del modulo dopo un invio non riuscito. L’elenco contiene collegamenti ai controlli con errori e il focus passa al titolo del riepilogo. La demo segue questa sequenza: una revisione con zero o un solo argomento mostra il riepilogo e il messaggio in linea; il collegamento sposta il focus sulla prima checkbox.
Dopo il primo tentativo, ogni modifica alla selezione verifica nuovamente il numero minimo. Quando sono selezionati due argomenti, entrambe le indicazioni di errore scompaiono senza cancellare le selezioni. Se un nuovo tentativo non riesce, il focus torna al titolo del riepilogo. La regola viene verificata di nuovo al momento della revisione; in un servizio reale, il feedback lato client non sostituisce la convalida lato server.
Avvia la revisione senza selezionare argomenti e verifica che il focus passi al riepilogo.
Segui il collegamento e seleziona due argomenti; verifica che l’errore scompaia.
Apri la revisione locale, torna indietro per modificare gli argomenti e verifica che entrambe le selezioni siano mantenute.
Sistema di progettazione sistema di design Helsinki: risorse ed esempio completo
Carica la base e i componenti selezionati
Il pacchetto Core separa base.css dagli stili dei componenti. Importare solo la base fornisce variabili e tipografia, ma non la struttura di checkbox e notifiche. La configurazione indica i file esatti usati in questo esempio, mantenendo l’insieme di risorse più leggero del bundle con tutti i componenti.
L’esempio completo include la convalida applicativa e il ripristino. Chiama lo stato finale revisione locale, perché non viene registrato né inviato nulla. Cancella selezione è un’azione esplicita che azzera le scelte e la cronologia di convalida, quindi porta il focus sul primo input; non viene attivata da un normale errore del campo.
base.css fornisce colori, spaziatura, tipografia e dimensioni di riferimento.
Gli stili checkbox e selection-group forniscono controlli raggruppati e feedback in linea.
Gli stili notification e button forniscono la superficie del riepilogo degli errori e le azioni.
Sistema di progettazione sistema di design Helsinki: cosa dimostra l’esempio
Dettagli di implementazione senza dichiarazioni ingannevoli sul servizio
L’anteprima mostra l’uso di stili reali dei componenti HDS, il focus da tastiera, la correzione e la conservazione dei dati a 1440, 768 e 390px. Non dichiara di aver superato una verifica esaustiva dell’accessibilità. Un vero servizio comunale multilingue richiede anche etichette localizzate, metadati linguistici adeguati, regole lato server e una risposta confermata dal backend del servizio.
Il codice sorgente è concesso in licenza MIT, ma il font personalizzato della città ha limiti d’uso propri. Questo esempio didattico indipendente usa argomenti fittizi per un programma e non riproduce l’identità ufficiale Helsinki. L’aspetto visibile e lo stato locale non devono essere confusi con una vera registrazione a un evento.
Focus sul riepilogo degli errori, correzione tramite collegamenti, revisione, modifica e cancellazione della selezione.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Plan a skills afternoon</title><link rel="stylesheet" href="vendor/hds-core-5.2.2/base.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/checkbox.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/selection-group.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/notification.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/button.css"><style>*{box-sizing:border-box}body{margin:0;padding:var(--spacing-layout-s) var(--spacing-s);font-family:var(--font-default);color:var(--color-black-90)}main{max-width:720px;margin:auto}h1{margin-top:8px}header{border-top:8px solid var(--color-copper);padding-top:var(--spacing-m)}.hds-selection-group{margin:24px 0}.hds-notification{margin:24px 0}.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}footer{font-size:14px;line-height:1.5;margin-top:32px;border-top:1px solid var(--color-black-20);padding-top:16px}#review{background:var(--color-silver-light);padding:24px;margin-top:24px}[hidden]{display:none!important}@media(max-width:575px){.heading-xl{font-size:var(--fontsize-heading-xl-mobile)}}button{max-width:100%}</style><main class="text-body"><header><small>COMMUNITY SKILLS · LOCAL PLAN</small><h1 class="heading-xl">Plan a skills afternoon</h1><p>Select at least two topics for an example programme. Nothing is registered or sent.</p></header><form id="form" novalidate><div id="summary" class="hds-notification hds-notification--error" hidden><div class="hds-notification__content"><h2 id="summary-heading" class="hds-notification__label" tabindex="-1">Check your topic selection</h2><div class="hds-notification__body"><ul><li><a href="#repair" id="error-link">Choose at least two topics</a></li></ul></div></div></div><fieldset class="hds-selection-group" aria-describedby="hint field-error"><legend class="hds-selection-group__legend">Topics for your afternoon</legend><p id="hint">Choose two or more. You can change your selection before reviewing the plan.</p><div class="hds-selection-group__items hds-selection-group__items--vertical"><div class="hds-checkbox"><input id="repair" type="checkbox" class="hds-checkbox__input" value="Repair and reuse"><label class="hds-checkbox__label" for="repair">Repair and reuse</label></div><div class="hds-checkbox"><input id="digital" type="checkbox" class="hds-checkbox__input" value="Everyday digital skills"><label class="hds-checkbox__label" for="digital">Everyday digital skills</label></div><div class="hds-checkbox"><input id="garden" type="checkbox" class="hds-checkbox__input" value="Urban gardening"><label class="hds-checkbox__label" for="garden">Urban gardening</label></div></div><div id="field-error" class="hds-selection-group__error-text" hidden>Choose at least two topics.</div></fieldset><p id="count" role="status">0 topics selected.</p><div class="actions"><button class="hds-button hds-button--primary" type="submit">Review local plan</button><button id="reset" class="hds-button hds-button--secondary" type="button">Clear selection</button></div></form><section id="review" hidden tabindex="-1"><h2 class="heading-m">Your selected topics</h2><ul id="selected"></ul><p>This is a local review, not a booking confirmation.</p><button id="change" class="hds-button hds-button--secondary">Change topics</button></section><footer>Native HDS Core5.2.2 styles with Arial fallback. Original selection rule and local review. No Helsinki branding, registration or backend.</footer></main><script>let attempted=false;const boxes=[...document.querySelectorAll('input[type=checkbox]')];const values=()=>boxes.filter(x=>x.checked);function validate(focus=false){const n=values().length;document.querySelector('#count').textContent=n+' topics selected.';const bad=attempted&&n<2;document.querySelector('#summary').hidden=!bad;document.querySelector('#field-error').hidden=!bad;boxes.forEach(x=>{if(bad)x.setAttribute('aria-invalid','true');else x.removeAttribute('aria-invalid')});if(bad&&focus)document.querySelector('#summary-heading').focus();return !bad}boxes.forEach(x=>x.onchange=()=>validate());document.querySelector('#error-link').onclick=e=>{e.preventDefault();boxes[0].focus()};document.querySelector('#form').onsubmit=e=>{e.preventDefault();attempted=true;if(!validate(true))return;const list=document.querySelector('#selected');list.replaceChildren();values().forEach(x=>{const li=document.createElement('li');li.textContent=x.value;list.append(li)});document.querySelector('#form').hidden=true;document.querySelector('#review').hidden=false;document.querySelector('#review').focus()};document.querySelector('#change').onclick=()=>{document.querySelector('#form').hidden=false;document.querySelector('#review').hidden=true;boxes[0].focus()};document.querySelector('#reset').onclick=()=>{boxes.forEach(x=>x.checked=false);attempted=false;validate();boxes[0].focus()};</script></html>
Configurazione dell’agente per il sistema di progettazione sistema di design Helsinki
Punto di partenza per l’implementazione
Percorsi esatti delle risorse Core. Il codice applicativo gestisce la convalida e la revisione; HelsinkiGroteskPro non è incluso. Lo ZIP dell’esempio completo funzionante, disponibile in Fonti, include anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/helsinki.html. Non aprire gli esempi basati su moduli tramite file://.
bash
npm install [email protected]
# CSS imports in a bundler:
# import 'hds-core/lib/base.css';
# import 'hds-core/lib/components/checkbox/checkbox.css';
# import 'hds-core/lib/components/selection-group/selection-group.css';
# import 'hds-core/lib/components/notification/notification.css';
# import 'hds-core/lib/components/button/button.css';
# In plain HTML, copy these files into public assets and link base.css first.
# HelsinkiGroteskPro is not bundled; the native font stack falls back to Arial.
Un prompt per il tuo progetto
Prompt per l’agente
Usa HDS Core5.2.2 base e i componenti selezionati CSS. Raggruppa le checkbox correlate con fieldset/legend, mantieni le etichette e i suggerimenti e usa token semantici per gli errori. Dopo una revisione non riuscita, mostra gli errori collegati sotto il titolo del modulo e porta il focus sul titolo del riepilogo. Ripeti la verifica dopo la correzione, conserva i valori selezionati e distingui la revisione locale da un invio confermato dal server.
05
Fonti e ambito del sistema di progettazione sistema di design Helsinki
Esempio indipendente OpenDesign. Nessuna risorsa per il font Helsinki né identità del servizio; nessuna registrazione o risposta dal backend.
