Изучите реальные роли темы, режимы размеров и поведение встроенных полей Designsystemet на примере полноценного редактора задания с индикацией количества символов и сохранением состояния отображения.
Используйте встроенный счётчик символов, меняйте тему и размер, сохраняйте или сбрасывайте результат проверки в зависимости от внесённых изменений.
Просмотрите краткое описание при разных размерах и вариантах оформленияОткрыть полный пример
Встроенное поведение ds-field из Designsystemet 1.23.0, CSS и тема по умолчанию с локальными шрифтами Inter. · Справочник по реализации
02
Справочник по дизайн-системе Designsystemet
Экспорт темы по умолчанию и встроенная реализация ds-field из @digdir/designsystemet-css/web 1.23.0. В строках с цветами явно указаны значения для светлого режима.
Поведение дизайн-системы Designsystemet, CSS и пакеты тем
Подключайте три части в правильном порядке
Designsystemet разделяет независимое от фреймворка поведение, CSS компонентов и значения темы. В этом примере закреплены версии designsystemet-web и designsystemet-css 1.23.0; сначала импортируется CSS, затем тема по умолчанию, после чего поведение регистрируется один раз. Стилизованное поле без пакета поведения — это не та же реализация, что показанный здесь связанный ds-field.
Используйте актуальный контракт plain-HTML
В примере ds-field оборачивает обычные элементы input, textarea и select с классами ds-input. Так сохраняются нативные элементы форм, а пакет связывает подписи и описания. Здесь не скопирована устаревшая реализация поля API только на React. Полный исходный код содержит корректные импорты пакетов и логику проверки при просмотре из исходного приложения.
Цветовая схема и режимы размера дизайн-системы Designsystemet
Меняйте оформление с помощью атрибутов data
На корневом элементе страницы устанавливается data-color-scheme со значением light или dark. Тема задаёт соответствующие семантические цвета, а значения полей формы остаются неизменными. В таблице параметров явно указаны значения светлой темы по умолчанию; в ней не утверждается, что те же цвета в формате hex применяются в тёмном режиме. Кнопка переключения оформления описывает действие, которое будет выполнено при нажатии.
Применяйте режим размера ко всей системе
Элемент управления размером текста меняет data-size между sm, md и lg. Так меняется режим размера темы, а не только масштаб заголовка. Опубликованные коэффициенты режимов — 1, 1.125 и 1.3125; они участвуют в формулах токенов и не означают, что каждому элементу управления следует задать такой размер в пикселях. В примере проверяется крупный режим как на телефоне, так и на настольном компьютере.
Inter и семантическая типографика дизайн-системы Designsystemet
Подключите нужные начертания
В предпросмотре используются Inter 400, 500 и 600, а также задокументированная функция шрифта cv05 для формы строчной буквы l. На странице применяются нативные классы заголовков и абзацев, поэтому насыщенность шрифта и высота строки соответствуют теме. Фиксированная аннотация размером 14px — это вспомогательная подпись, заданная автором и явно вынесенная за пределы основной интерактивной шкалы.
Размещайте вспомогательные пояснения рядом с элементом управления
Подсказка к заголовку объясняет назначение подписи, а подсказка к результату описывает ожидаемое содержимое. Они остаются рядом со своими элементами управления и связываются через ds-field. Дополнительные рекомендации размещены на отдельной карточке, которая следует за формой на узких экранах. Для показа инструкций не требуется наведение указателя.
Автоматические связи и обратная связь по количеству символов в дизайн-системе Designsystemet
Поручите ds-field связать один элемент управления
Каждый ds-field содержит один элемент управления типа input, его подпись и необязательные описания data-field. Пакет назначает идентификаторы и создаёт связи между подписью и описаниями. Если сгруппировать в одном ds-field несвязанные элементы управления, автоматический контракт станет неоднозначным. Для группы используйте fieldset, а не считайте эту обёртку универсальным контейнером формы.
В каждом ds-field должен быть один элемент управления типа input.
Используйте описания data-field для связанных вспомогательных пояснений.
Поручите встроенному наблюдателю управлять идентификаторами и связями described-by.
Учитывайте, что именно считает счётчик
Проверка приложения и состояние просмотра в дизайн-системе Designsystemet
Проверяйте требования сценария отдельно
Приложение требует непустые заголовок задачи и описание результата, а также отклоняет результат, превышающий лимит примера. После показа понятного сообщения приложение переводит фокус на соответствующее поле. Встроенный счётчик показывает длину, а обработчик отправки применяет локальное правило проверки при просмотре. Атрибут maxlength не обрезает вставленный текст незаметно для пользователя.
Сохраняйте данные при смене оформления
После успешной проверки при просмотре заголовок и описание результата показываются как текст. Изменение любого из этих полей очищает результат; изменение оформления или размера сохраняет его, поскольку эти элементы управления не меняют описание задачи. Это намеренное различие проверено. Данные никуда не отправляются в сервис управления проектами, и в предпросмотре не утверждается, что внешняя задача была создана.
Создайте проект Vite на vanilla JavaScript, установите два пакета Designsystemet с закреплёнными версиями и Inter, затем сохраните полный файл entry и digdir.css. Не удаляйте корневой элемент для монтирования. Исходный код включает регистрацию, порядок подключения тем, разметку счётчика, элементы управления оформлением и все переходы логики проверки при просмотре. В локальном предпросмотре используется тот же встроенный наблюдатель полей, а не его нарисованная вручную имитация.
Подключите поведение один раз, затем CSS компонента и тему по умолчанию.
Загрузите Inter 400, 500 и 600 и сохраните полный entry/CSS.
Проверьте счётчик при превышении лимита и исправьте описание результата.
Выполните просмотр, измените размер и оформление, затем отредактируйте текст, чтобы очистить результат.
Проверьте работу при превышении лимита и восстановлении
Вставьте в поле результата 150 обычных символов и убедитесь, что отображается превышение лимита на десять символов. Просмотр должен быть отклонён. Замените текст кратким описанием результата и выполните просмотр успешно, затем смените тёмный режим и размер текста, не теряя результат. Отредактируйте заголовок и убедитесь, что прежний результат проверки очищен. Проверьте видимость фокуса и перенос строк при каждой ширине области просмотра.
Примеры компонентов дизайн-системы Designsystemet
main.js — исследование полей и тем со встроенным поведением
Полный редактор, настоящая разметка счётчика, элементы управления оформлением и размером, а также локальная проверка при просмотре.
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()});
Смена темы и размера сохраняет введённые значения; проверка сбрасывается только после изменения содержимого.
04
Настройка агента дизайн-системы Designsystemet
Отправная точка для реализации
Связи встроенных меток, состояние счётчика, восстановление после ошибок проверки и смена размера в светлой и тёмной темах протестированы в настоящем браузере.
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
Запрос для вашего проекта
Промпт для AI-агента
Создайте редактор краткого описания, соблюдая поведение Designsystemet 1.23.0, CSS и тему default в правильном порядке. Используйте ds-field с одним встроенным элементом управления, фактическими атрибутами счётчика data-field и начертаниями Inter. Сохраняйте результат проверки при смене оформления и размера, сбрасывайте его при изменении содержимого и соблюдайте исходное ограничение в 140 символов, не обрезая вставленный текст.
05
Источники и область применения дизайн-системы Designsystemet
Локальный редактор, созданный OpenDesign с использованием Designsystemet CSS и веб-поведения версии 1.23.0. Тема default и наблюдатель полей — встроенные; содержимое краткого описания, ограничение в 140 символов и процесс проверки — оригинальные.
