Kombinieren Sie native HDS-Auswahlgruppen, semantische Feedbackfarben und verknüpfte Fehlerübersichten zu einem vollständigen lokalen Ablauf zum Prüfen und Korrigieren.
Kern und Abgrenzung zu React im Helsinki-Designsystem
Verwenden Sie die Implementierung, die Sie tatsächlich ausführen
HDS stellt Core CSS, React-Komponenten und Design-Tokens bereit. Dieses Beispiel verwendet fest hds-core5.2.2, das für das Beispiel heruntergeladene und geprüfte Paket. Versionsnummern von Repository-Releases können von der Version eines einzelnen Pakets abweichen. Ein neuerer Repository-Tag ist daher kein Beleg dafür, dass dieses Beispiel mit dieser Version ausgeführt wird.
Core stellt Basisvariablen und einzelne Komponentenstile bereit. Der hier verwendete Formular-Anwendungszustand ist darin nicht enthalten. Auswahl, Validierung, Überprüfung und Änderungslogik wurden eigens für JavaScript entwickelt und bauen auf nativen HTML-Eingaben sowie dem dokumentierten HDS-Formularmuster auf.
Typografie und die Schriftartgrenze im Helsinki-Designsystem
Nativen Fallback transparent verwenden
Die Schriftvariablen führen zuerst HelsinkiGroteskPro und danach Arial und sans-serif auf. In der Core-README wird ausdrücklich darauf hingewiesen, dass die Schriftdateien von Helsinki aus urheberrechtlichen Gründen nicht enthalten sind. Die Vorschau verwendet weiterhin den Fallback, statt eingeschränkte Schriftarten herunterzuladen oder stillschweigend eine exakte Markendarstellung zu behaupten.
Das Basis-Body-Token beträgt16px bei einer Zeilenhöhe von1.5. Heading-xl beträgt48px, das mobile Token40px; die Vorschau wechselt bei576px zwischen ihnen. Dies sind benannte Werte, doch eine CSS-Variable mit einem Breakpoint sorgt nicht automatisch für responsives Verhalten. Die explizite Media-Regel gehört zur Anwendungskomposition.
Abstände zwischen Komponenten und Seitenrhythmus getrennt behandeln
HDS unterscheidet eine Abstandsfolge für Komponenten von einer größeren Abstandsfolge für Layouts. Erstere umfasst2,4,8,12,16 und24px und wächst anschließend bis72px. Die Layoutabstände reichen bis128px. spacing-layout-xl als Abstand zwischen benachbarten Checkboxen würde die Gruppe überladen, obwohl die Variable gültig ist.
Die Checkbox-Komponente definiert ein Bedienelement mit24px, einen2px-Rahmen und einen3px-Fokusring. Die Mindesthöhe des Buttons beträgt56px, seine Ecken sind rechtwinklig. Die Vorschau übernimmt diese nativen Formen; das Formular befindet sich in einem Anwendung-Container mit einer maximalen Breite von720px gemäß der veröffentlichten Referenzbreite.
Farbfunktionen in einem Formular des Helsinki-Designsystems
Palettennamen nicht mit Rückmeldungsfunktionen verwechseln
Das interaktive Standarddesign verwendet Busblau, während die Fokusumrandung Wappenblau nutzt. Für Fehlermeldungen kommen ein separater Beerenton und eine helle Fehlerfläche zum Einsatz. Ein Palettenakzent wie Kupfer kann eine Kopfzeile gestalten, sollte aber nicht allein deshalb die Fehlerfarbe ersetzen, weil er markanter wirkt.
Die Inline-Fehlermeldung der Auswahlgruppe kombiniert Text, einen kontrastierenden linken Rand und ein Icon. Sie verlässt sich nicht allein auf die Farbe Rot. Die Links in der Fehlerübersicht verwenden die vertraute Interaktionsfarbe, damit der Weg zurück zum Feld leicht erkennbar ist.
Anatomie einer Kontrollkästchengruppe im Helsinki-Designsystem
Eine Gruppe umfasst eine Frage und mehrere Antwortmöglichkeiten
Die native Struktur besteht aus einem fieldset mit einer legend, einem Container für die Elemente und einzelnen Kontrollkästchen-Containern. Auf jedes Eingabefeld folgt unmittelbar sein Label, da das Stylesheet diese Beziehung für visuelle Zustände nutzt. Die legend erläutert die Auswahlaufgabe; jedes Label benennt ein verfügbares Thema.
Das Beispiel verlangt mindestens zwei Themen – eine eigens festgelegte Geschäftsregel. Kontrollkästchen sind passend, da mehrere Optionen ausgewählt bleiben können. Eine Optionsgruppe würde eine sich gegenseitig ausschließende Auswahl ausdrücken und der Aufgabe widersprechen. Der Hinweis zum fieldset bleibt vor und nach der Validierung sichtbar.
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>
Verknüpfte Fehlermeldungen und Fehlerbehebung im Helsinki-Designsystem
Problem fokussieren und Eingaben beibehalten
HDS empfiehlt, nach dem Absenden eines fehlerhaften Formulars eine Fehlerübersicht unterhalb der Formularüberschrift anzuzeigen. Ihre Einträge verlinken auf fehlerhafte Steuerelemente, und der Fokus wird auf die Überschrift der Übersicht gesetzt. Das Beispiel folgt diesem Ablauf: Werden keine oder nur ein Thema ausgewählt, erscheinen die Übersicht und eine Inline-Fehlermeldung; der Link setzt den Fokus auf das erste Kontrollkästchen.
Nach dem ersten Versuch wird bei jeder Änderung der Auswahl erneut geprüft, ob die Mindestanzahl erreicht ist. Sobald zwei Themen ausgewählt sind, verschwinden beide Fehleranzeigen, ohne die ausgewählten Eingaben zu löschen. Bei einem weiteren fehlgeschlagenen Versuch springt der Fokus zurück zur Überschrift der Fehlerübersicht. Bei der Überprüfung wird die Regel erneut geprüft; clientseitige Rückmeldungen ersetzen in einem echten Dienst keine serverseitige Validierung.
Ohne ausgewählte Themen überprüfen und sicherstellen, dass die Fehlerübersicht den Fokus erhält.
Dem Link folgen und zwei Themen auswählen; sicherstellen, dass die Fehlermeldung verschwindet.
Die lokale Überprüfung öffnen, zurückkehren, die Themen ändern und prüfen, ob beide Auswahlen erhalten bleiben.
Assets und vollständiges Beispiel im Helsinki-Designsystem
Basis und ausgewählte Komponenten laden
Das Core-Paket trennt base.css von den Komponenten-Stylesheets. Wird nur base importiert, stehen Variablen und Typografie zur Verfügung, nicht aber die Gestaltung der Kontrollkästchen oder Benachrichtigungen. Die Einrichtung nennt genau die Dateien, die in diesem Beispiel verwendet werden, und hält so den Asset-Umfang kleiner als beim Bundle mit allen Komponenten.
Das vollständige Beispiel umfasst die Anwendungsvalidierung und das Zurücksetzen. Der letzte Zustand heißt „lokale Überprüfung“, da nichts registriert oder gesendet wird. Die Auswahl wird bewusst gelöscht: Auswahlen und Validierungsverlauf werden zurückgesetzt, anschließend erhält das erste Eingabefeld den Fokus. Ein gewöhnlicher Feldfehler löst diese Aktion nicht aus.
base.css stellt Farben, Abstände, Typografie und Referenzmaße bereit.
Die Styles für Kontrollkästchen und Auswahlgruppen sorgen für gruppierte Steuerelemente und Inline-Rückmeldungen.
Die Styles für Benachrichtigungen und Schaltflächen stellen die Fehlerübersicht und Aktionen bereit.
Implementierungsdetails ohne irreführende Aussagen über den Dienst
Die Vorschau zeigt die tatsächliche HDS-Komponentenformatierung, Tastaturfokus, Fehlerbehebung und Datenerhalt bei 1440, 768 und 390 px. Sie erhebt nicht den Anspruch, eine umfassende Barrierefreiheitsprüfung darzustellen. Ein echter mehrsprachiger Stadtdienst benötigt außerdem lokalisierte Labels, passende Sprachmetadaten, serverseitige Regeln und eine bestätigte Antwort seines Service-Backends.
Der Quellcode ist unter MIT lizenziert, für die Stadtschrift gelten jedoch eigene Nutzungsrechte. Dieses unabhängige Lernbeispiel verwendet fiktive Programmthemen und keine offizielle Helsinki-Identität. Die sichtbare Gestaltung und der lokale Zustand dürfen nicht mit einer echten Veranstaltungsanmeldung verwechselt werden.
Vollständiger Ablauf zur Auswahl mit verknüpften Fehlermeldungen
Fokus auf der Fehlerübersicht, verknüpfte Fehlerbehebung, Überprüfen, Ändern und Auswahl löschen.
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>
Exakte Pfade der Core-Assets. Der Anwendungscode übernimmt Validierung und Überprüfung; HelsinkiGroteskPro ist nicht enthalten. Das vollständige ZIP mit dem funktionierenden Beispiel unter Sources enthält außerdem die exakten Abhängigkeiten für die Vorschau und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/helsinki.html. Öffnen Sie Beispiele mit Modulen nicht über 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.
Ein Prompt für dein Projekt
Agenten-Prompt
Verwenden Sie HDS Core 5.2.2 mit base und den ausgewählten Komponenten-CSS. Gruppieren Sie verwandte Kontrollkästchen mit fieldset/legend, erhalten Sie Labels und Hinweise und verwenden Sie semantische Fehlertokens. Zeigen Sie bei einer fehlgeschlagenen Überprüfung verknüpfte Fehlermeldungen unter der Formularüberschrift an und setzen Sie den Fokus auf die Überschrift der Übersicht. Prüfen Sie nach einer Korrektur erneut, behalten Sie ausgewählte Werte bei und unterscheiden Sie die lokale Überprüfung von einer serverseitig bestätigten Übermittlung.
05
Quellen und Geltungsbereich des Helsinki-Designsystems
Unabhängiges OpenDesign-Beispiel. Kein Schriftdatei-Asset Helsinki und keine Dienstidentität; keine Registrierung und kein Backend-Ergebnis.
