Государственные услуги и образование · Новый ресурс
Дизайн-система Helsinki.
Создайте группы выбора HDS с нативным поведением, семантические цвета обратной связи и связанные сводки ошибок на примере полноценного локального процесса проверки и исправления.
Нативные стили hds-core5.2.2 CSS; запасной вариант — Arial, логика приложения реализована отдельно. · Справочник по реализации
02
Справочник по дизайн-системе Helsinki
Пакет hds-core5.2.2 CSS и официальные рекомендации по формам. Нативные стили; запасной вариант — Arial; исходное правило минимального количества выбранных пунктов.
Границы между Core и React дизайн-системы Helsinki
Выберите реализацию, которую действительно используете
HDS предоставляет Core CSS, компоненты React и дизайн-токены. В этом примере используется зафиксированная версия hds-core5.2.2 — именно этот пакет был загружен и изучен. Номер релиза репозитория может отличаться от версии отдельного пакета, поэтому более новый тег репозитория не доказывает, что пример работает на этой версии.
Core предоставляет базовые переменные и стили отдельных компонентов. Логика состояния формы приложения, использованная здесь, в него не входит. Выбор, проверка, просмотр и изменение реализованы отдельно в JavaScript на основе нативных элементов ввода HTML и задокументированного шаблона форм HDS.
Типографика дизайн-системы Helsinki и границы использования шрифтов
Открыто указывайте резервный шрифт
Переменная шрифта сначала указывает HelsinkiGroteskPro, а затем — Arial и sans-serif. В README для Core прямо сказано, что файлы шрифта Helsinki исключены из-за авторских прав. В предварительном просмотре используется резервный шрифт: ограниченные в использовании шрифты не загружаются и точное фирменное отображение не заявляется.
Базовый токен основного текста — 16px с межстрочным интервалом 1.5. Значение heading-xl — 48px, мобильное значение токена — 40px; в предварительном просмотре переключение происходит на ширине 576px. Это именованные значения, но переменная CSS с точкой останова не создаёт адаптивное поведение автоматически. Явное медиаправило относится к композиции приложения.
HDS различает последовательность интервалов для компонентов и более крупную последовательность для макета. Первая включает 2, 4, 8, 12, 16 и 24px, а затем значения увеличиваются до 72px. Интервалы макета достигают 128px. Использование spacing-layout-xl между соседними флажками перегрузит группу, хотя переменная задана корректно.
В компоненте флажка заданы элемент управления размером 24px, рамка толщиной 2px и контур фокуса толщиной 3px. Минимальная высота кнопки — 56px, углы прямые. Предварительный просмотр сохраняет эти нативные формы, а форма размещена в контейнере приложения с максимальной шириной 720px — это опубликованное эталонное значение.
Не путайте названия цветов палитры с обратной связью
В теме интерактивных элементов по умолчанию используется Bus blue, а для контура фокуса — Coat of arms blue. Для ошибок предусмотрены отдельный ягодный оттенок и светлая подложка. Акцентный цвет палитры, например Copper, подходит для заголовка, но не должен заменять цветовую роль ошибки лишь потому, что он выглядит выразительнее.
Встроенное сообщение об ошибке для группы выбора сочетает текст, контрастную левую рамку и значок. Оно не полагается только на красный цвет. Ссылки в сводке ошибок используют привычный интерактивный цвет, чтобы пользователи понимали, как вернуться к полю.
Нативная структура включает fieldset с legend, контейнером вариантов и отдельными обёртками для флажков. Каждый input расположен непосредственно перед своей подписью, поскольку таблица стилей использует эту связь для оформления состояний. Легенда объясняет задачу выбора, а каждая подпись называет один из доступных вариантов.
В примере нужно выбрать не менее двух тем — это исходное бизнес-правило. Флажки подходят, поскольку можно оставить выбранными несколько вариантов. Группа переключателей подразумевала бы взаимоисключающий выбор и противоречила бы задаче. Подсказка fieldset остаётся видимой до и после проверки.
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>
Связанные ошибки и исправление в дизайн-системе Helsinki
Сфокусируйте внимание на проблеме, сохранив введённые данные
HDS рекомендует после неудачной отправки размещать сводку ошибок под заголовком формы. Ссылки в списке ведут к полям с ошибками, а фокус перемещается на заголовок сводки. В примере используется та же последовательность: при попытке проверить форму без выбранных тем или с одной темой появляются сводка и встроенное сообщение; ссылка переводит фокус на первый флажок.
После первой попытки каждое изменение выбора приводит к повторной проверке минимального количества. Когда выбраны две темы, оба сообщения об ошибках исчезают, а выбранные значения сохраняются. При следующей неудачной попытке фокус снова перемещается на заголовок сводки. Правило проверяется и при просмотре; обратная связь на стороне клиента не заменяет серверную проверку в реальном сервисе.
Попробуйте просмотреть форму без выбранных тем и убедитесь, что фокус перемещается на сводку.
Перейдите по ссылке и выберите две темы; убедитесь, что ошибка исчезла.
Откройте локальный просмотр, вернитесь к выбору тем и убедитесь, что оба варианта остались выбраны.
В пакете Core файл base.css отделён от стилей компонентов. Одного base недостаточно: он предоставляет переменные и типографику, но не структуру флажка или уведомления. В настройке указаны точные файлы, используемые в этом примере, поэтому набор ресурсов меньше, чем пакет со всеми компонентами.
Полный пример включает проверку формы и сброс, реализованные на уровне приложения. В финальном состоянии используется название «локальный просмотр», поскольку данные никуда не регистрируются и не отправляются. Очистка выбора — осознанное действие: оно сбрасывает выбранные пункты и историю проверки, а затем переводит фокус на первый элемент ввода. Обычная ошибка поля не запускает сброс.
base.css предоставляет цвета, интервалы, типографику и эталонные размеры.
Стили checkbox и selection-group задают сгруппированные элементы управления и встроенную обратную связь.
Стили notification и button задают подложку сводки ошибок и действия.
Подробности реализации без неподтверждённых заявлений о сервисе
Предварительный просмотр демонстрирует реальные стили компонентов HDS, фокус при навигации с клавиатуры, исправление ошибок и сохранение данных при ширине экрана 1440, 768 и 390px. Это не заявление о полном аудите доступности. Реальному многоязычному городскому сервису также нужны локализованные подписи, подходящие языковые метаданные, серверные правила и подтверждённый ответ серверной части сервиса.
Исходный код распространяется по лицензии MIT, но на городской шрифт распространяются отдельные ограничения. В этом независимом учебном примере используются вымышленные темы программ, а фирменная айдентика Helsinki отсутствует. Вид примера и локальное состояние нельзя принимать за настоящую регистрацию на мероприятие.
Полный сценарий выбора с переходом к связанным ошибкам
Фокус на сводке ошибок, переход к полю для исправления, просмотр, изменение и очистка выбора.
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>
Точные пути к ресурсам Core. Проверку и просмотр обрабатывает код приложения; HelsinkiGroteskPro не входит в пакет. В ZIP-архиве полного рабочего примера из раздела «Источники» также находятся точные зависимости для предварительного просмотра и полный документ. Распакуйте архив, запустите в этой папке команду python3 -m http.server 8080, затем откройте http://localhost:8080/helsinki.html. Не открывайте примеры с модулями через 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.
Запрос для вашего проекта
Промпт для AI-агента
Используйте base и выбранные стили компонентов CSS из HDS Core5.2.2. Объединяйте связанные флажки с помощью fieldset/legend, сохраняйте подписи и подсказки и применяйте семантические токены ошибок. После неудачной проверки показывайте связанные ошибки под заголовком формы и переводите фокус на заголовок сводки. Повторно проверяйте форму после исправлений, сохраняйте выбранные значения и отличайте локальный просмотр от отправки, подтверждённой сервером.
05
Источники и область применения дизайн-системы Helsinki
Независимый пример OpenDesign. Без ресурса шрифта Helsinki и айдентики сервиса; без регистрации и ответа серверной части.
