Entdecken Sie die tatsächlichen Theme-Rollen, Größenmodi und das native Verhalten von Eingabefeldern in Designsystemet anhand eines vollständigen Editors für Aufgabenbeschreibungen mit Zeichenfeedback und beibehaltenem Darstellungszustand.
Vorschau der Designsystemet-Designsystem-Oberfläche
Verwenden Sie den nativen Zeichenzähler, ändern Sie Theme und Größe und behalten Sie die Prüfung bei oder setzen Sie sie zurück – je nachdem, was sich geändert hat.
Natives Designsystemet-Verhalten von ds-field in Version 1.23.0, CSS und Standard-Theme mit lokalen Inter-Schriftarten. · Implementierungsreferenz
02
Designreferenz für das Designsystemet-Designsystem
Exporte des Standard-Themes und native ds-field-Implementierung in @digdir/designsystemet-css/web 1.23.0. In den Farbzeilen sind die Werte für den Hellmodus ausdrücklich angegeben.
Verhalten, CSS und Theme-Pakete des Designsystemet-Designsystems
Die drei Teile in der richtigen Reihenfolge laden
Designsystemet trennt frameworkunabhängiges Verhalten, Komponenten-CSS und Theme-Werte. Dieses Beispiel verwendet designsystemet-web und designsystemet-css in Version 1.23.0, importiert zunächst das CSS und anschließend das Standard-Theme und registriert das Verhalten einmalig. Ein gestaltetes Feld ohne sein Verhaltenspaket entspricht nicht derselben Implementierung wie das hier gezeigte verbundene ds-field.
Den aktuellen Plain-HTML-Vertrag verwenden
Das Beispiel verwendet ds-field um normale input-, textarea- und select-Elemente mit ds-input-Klassen. So bleiben native Formularsteuerelemente erhalten, während das Paket Beschriftungen und Beschreibungen verknüpft. Es kopiert kein älteres, nur auf React basierendes Feld-API. Der vollständige Quellcode enthält die korrekten Paketimporte und die ursprüngliche Prüfungslogik der Anwendung.
Farbschema und Größenmodi des Designsystemet-Designsystems
Darstellung über Datenattribute ändern
Die Seite setzt data-color-scheme im Stammelement auf light oder dark. Das Theme stellt die entsprechenden semantischen Farben bereit, während die Formularwerte unverändert bleiben. Die Parametertabelle gibt die Standardwerte für den Hellmodus ausdrücklich an; sie erweckt nicht den Eindruck, dieselben Hex-Farben würden auch im Dunkelmodus gelten. Eine Schaltfläche für die Darstellung beschreibt, welche Aktion als Nächstes ausgeführt wird.
Den Größenmodus auf das gesamte System anwenden
Die Steuerung für die Leseschriftgröße ändert data-size zwischen sm, md und lg. Dadurch ändert sich der Größenmodus des Themes, statt nur die Überschrift zu vergrößern. Die veröffentlichten Modusfaktoren sind 1, 1.125 und 1.3125. Sie fließen in die Tokenformeln ein und sind keine allgemeingültige Vorgabe, Steuerelemente auf diese Pixelwerte zu setzen. Das Beispiel prüft den großen Modus sowohl auf schmalen Smartphone-Bildschirmen als auch auf dem Desktop.
Inter und semantische Typografie im Designsystemet-Designsystem
Die vorgesehenen Schriftschnitte einbinden
Die Vorschau bindet Inter in den Schriftschnitten 400, 500 und 600 ein und aktiviert das dokumentierte cv05-Schriftmerkmal für die Kleinbuchstabenform von l. Die Seite verwendet native Überschriften- und Absatzklassen, damit Schriftstärke und Zeilenhöhe dem Theme folgen. Eine festgelegte Anmerkung in 14px ist eine eigens verfasste ergänzende Notiz und liegt eindeutig außerhalb der Hauptskala für Interaktionen.
Hilfetexte direkt neben dem jeweiligen Steuerelement platzieren
Der Hinweis zum Titel erläutert den Zweck der Beschriftung; der Hinweis zum Ergebnis beschreibt, welche Art von Inhalt erwartet wird. Beide stehen neben den jeweiligen Steuerelementen und sind über ds-field mit ihnen verknüpft. Ergänzende Hinweise befinden sich in einer separaten Karte, die auf schmalen Bildschirmen unter dem Formular angeordnet wird. Die Anweisungen sind nicht erst beim Darüberfahren mit dem Mauszeiger sichtbar.
Automatische Beziehungen und Zeichenanzahl-Rückmeldung im Designsystemet-Designsystem
ds-field jeweils ein Steuerelement verknüpfen lassen
Jedes ds-field enthält ein inputähnliches Steuerelement, seine Beschriftung und optionale data-field-Beschreibungen. Das Paket weist IDs zu und erstellt die Beziehungen zwischen Beschriftungen und Beschreibungen. Werden nicht zusammengehörige Steuerelemente in einem ds-field gruppiert, wird dieser automatische Vertrag mehrdeutig. Verwenden Sie für eine Gruppe ein fieldset, statt anzunehmen, der Wrapper sei ein allgemeiner Formularcontainer.
In jedem ds-field nur ein inputähnliches Steuerelement verwenden.
Zusammengehörige Hilfetexte über data-field-Beschreibungen bereitstellen.
Den nativen Observer IDs und Beschreibungsbeziehungen verwalten lassen.
Verstehen, was der Zähler misst
Anwendungsvalidierung und Prüfstatus im Designsystemet-Designsystem
Die Vorgaben der Anwendung gesondert validieren
Die Anwendung verlangt einen nicht leeren Aufgabentitel und ein nicht leeres Ergebnis und lehnt Ergebnisse ab, die länger als das Beispiel-Limit sind. Nach Anzeige einer umsetzbaren Meldung wird das entsprechende Feld fokussiert. Der native Zähler gibt Auskunft über die Länge, während der Submit-Handler die lokale Prüfregel durchsetzt. Durch maxlength wird eingefügter Text nicht stillschweigend abgeschnitten.
Daten bei Änderungen der Darstellung beibehalten
Eine erfolgreiche Prüfung zeigt den aktuellen Titel und das Ergebnis als Text an. Wenn eines der beiden Felder bearbeitet wird, wird das Ergebnis gelöscht. Änderungen an Darstellung oder Größe lassen es bestehen, da diese Steuerelemente den Auftrag nicht verändern. Diese Unterscheidung ist beabsichtigt und wurde überprüft. Es werden keine Daten an einen Projektmanagementdienst gesendet, und die Vorschau behauptet niemals, dass eine externe Aufgabe erstellt wurde.
Vollständige native Feldimplementierung für das Designsystemet-Designsystem
Das versionierte Beispiel reproduzieren
Erstelle ein Vite-Vanilla-Projekt, installiere die beiden festgelegten Pakete von Designsystemet und Inter und speichere anschließend den vollständigen Einstiegspunkt und digdir.css. Behalte das Root-Mount-Element bei. Der Quellcode enthält die Registrierung, die Reihenfolge der Themes, das Markup für den Zeichenzähler, die Darstellungssteuerelemente und sämtliche Zustandsübergänge zur Validierung der Prüfung. Die lokale Vorschau verwendet denselben nativen Feld-Observer und keine handgezeichnete Imitation.
Importiere zuerst einmal das Verhalten, dann die Komponente CSS und das Standard-Theme.
Lade Inter in den Schnitten 400, 500 und 600 und speichere den vollständigen Einstiegspunkt und CSS.
Teste den Zeichenzähler bei Überschreitung des Limits und korrigiere das Ergebnis.
Prüfe den Inhalt, wechsle Größe und Darstellung und bearbeite dann den Text, um das Ergebnis zu löschen.
Verhalten bei Überschreitung und Wiederherstellung testen
Füge 150 normale Zeichen in das Ergebnisfeld ein und überprüfe, ob eine Überschreitung um zehn Zeichen gemeldet wird. Die Prüfung muss den Inhalt ablehnen. Ersetze den Text durch ein kurzes Ergebnis und führe die Prüfung erfolgreich aus. Wechsle anschließend den Dunkelmodus und die Schriftgröße, ohne das Ergebnis zu verlieren. Bearbeite den Titel und vergewissere dich, dass die vorherige Prüfung gelöscht wird. Überprüfe den sichtbaren Fokus und den Textumbruch bei jeder Viewportbreite.
Komponentenbeispiele des Designsystemet-Designsystems
main.js — vollständige Untersuchung nativer Felder und Themes
Vollständiger Editor, echtes Markup für den Zeichenzähler, Steuerelemente für Darstellung und Größe sowie lokale Prüfvalidierung.
javascript
import '@digdir/designsystemet-web';
import '@digdir/designsystemet-css';
import '@digdir/designsystemet-css/theme';
import '@fontsource/inter/latin-400.css';
import '@fontsource/inter/latin-500.css';
import '@fontsource/inter/latin-600.css';
import './digdir.css';
document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`<main><header><div><p class="eyebrow">DESIGNSYSTEMET / NATIVE FIELD STUDY</p><h1 class="ds-heading" data-size="lg">Write a useful task brief</h1></div><button id="theme" class="ds-button" data-variant="secondary" aria-pressed="false">Dark appearance</button></header><p class="ds-paragraph lead">Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.</p><div class="layout"><form id="brief-form" novalidate><ds-field class="ds-field"><label>Task title</label><input id="title" class="ds-input" type="text" value="Review the navigation"/><p data-field="description">Use a short label that identifies the work.</p></ds-field><ds-field class="ds-field"><label>Desired outcome</label><textarea id="outcome" class="ds-input" rows="4">Make the main sections easier to find without changing the accepted content.</textarea><p data-field="description">Describe the result, not a list of implementation instructions.</p><p data-field="counter" data-limit="140" data-over="%d characters over the sample limit" data-under="%d characters remaining"></p></ds-field><p id="error" class="ds-validation-message" hidden role="alert"></p><button class="ds-button" type="submit">Review brief</button></form><aside class="ds-card" data-color="neutral"><h2 class="ds-heading" data-size="sm">Reading size</h2><p class="ds-paragraph">The theme changes the complete size mode rather than scaling only a heading.</p><ds-field class="ds-field"><label for="size">Component size</label><select class="ds-input" id="size"><option value="sm">Small</option><option value="md" selected>Medium</option><option value="lg">Large</option></select></ds-field><h3 class="ds-heading" data-size="xs">A clear brief contains</h3><ul><li>One concrete outcome.</li><li>Constraints that must remain true.</li><li>A way to check the result.</li></ul><p class="small">Default theme and web behavior 1.23.0. Original local application; no task is created elsewhere.</p></aside></div><section id="review" class="ds-card" data-color="success" hidden tabindex="-1"><h2 class="ds-heading" data-size="sm">Local brief review</h2><h3 id="review-title" class="ds-heading" data-size="xs"></h3><p id="review-body" class="ds-paragraph"></p><p class="small">Editing a field clears this review. Appearance and reading size preserve it.</p></section></main>`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()});
Änderungen an Theme und Größe erhalten die Werte; nur Änderungen am Inhalt machen die Prüfung ungültig.
04
Einrichtung eines Agents für das Designsystemet-Designsystem
Ausgangspunkt für die Implementierung
Native Label-Zuordnungen, Zeichenzählerstatus, Validierungswiederherstellung sowie Änderungen an Größe und hellem/dunklem Modus wurden in einem echten Browser getestet.
sh
npm create vite@latest ds-brief -- --template vanilla
cd ds-brief
npm install
npm install @digdir/[email protected] @digdir/[email protected] @fontsource/inter
# Replace src/main.js and add src/digdir.css. Keep <div id="root"></div>.
npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Erstelle den Editor für den Auftrag mit dem Verhalten von Designsystemet 1.23.0, CSS und dem Standard-Theme in der korrekten Reihenfolge. Verwende ds-field mit einem nativen Steuerelement, tatsächlichen data-field-Attributen für den Zeichenzähler und den Inter-Schriftschnitten. Erhalte die Prüfung bei Änderungen an Darstellung und Größe, lösche sie nach Änderungen am Inhalt und setze die ursprüngliche Begrenzung auf 140 Zeichen um, ohne eingefügten Text abzuschneiden.
05
Quellen und Geltungsbereich des Designsystemet-Designsystems
Ein lokal mit OpenDesign erstellter Editor auf Basis von Designsystemet CSS und dem Webverhalten von 1.23.0. Das Standard-Theme und der Feld-Observer sind nativ; der Inhalt des Auftrags, die Begrenzung auf 140 Zeichen und der Prüfablauf sind eigens erstellt.
