Создайте путь в стиле GOV.UK: ответьте на вопросы и проверьте ответы. Используйте актуальную типографическую шкалу v6, адаптивные отступы, функциональные цвета, связанную валидацию и конкретный пример интеграции Frontend.
Руководство OpenDesign8 глав37 справочных записейАвторское руководство по приложению
01
Дизайн-система GOV.UK Предварительный просмотр интерфейса
Отправьте пустые поля, перейдите по ссылкам на ошибки, исправьте ответы и измените значение на экране проверки. Данные не покидают страницу.
Запрос об участии в мероприятии: вопрос, проверка и подтверждение ответовОткрыть полный пример
Нативные GOV.UK Frontend 6.5.1 CSS, Button и ErrorSummary JavaScript, загружаются локально. Альтернативный шрифт Helvetica; исходная локальная проверка формы и переходы к проверке ответов. · Справочник по реализации
02
Дизайн-система GOV.UK Справочник по дизайну
GOV.UK Frontend 6.5.1 и актуальная документация v6, проверены 3 октября 2026 года. Значения HEX отражают снимок справочных данных; в рабочем проекте предпочтительнее использовать именованные функции Sass. В предварительном просмотре локально загружаются официальные CSS и JavaScript, используется альтернативный шрифт и независимая идентичность.
В этом справочнике используется документация v6, включая увеличенный размер текста на небольших экранах и обновлённые функциональные цвета. Поэтому на старом снимке экрана значения могут отличаться. В таблице выше приведены актуальные задокументированные значения по умолчанию, без незаметного смешения разных версий.
В примере рассматривается вымышленный запрос об участии в общественном мероприятии. В нём не используются корона, логотип GOV.UK, шрифт Transport или действующий адрес для отправки данных. Содержание задания и правила локальной проверки — решения приложения; структура компонентов основана на связанных официальных примерах.
Для сервисов service.gov.uk, подпадающих под соответствующие требования, GDS Transport входит в официальную реализацию. Государственные сервисы на других доменах должны использовать другой шрифт. В этом независимом примере применяется рекомендуемая альтернатива Helvetica Neue, Helvetica, Arial, sans-serif; смена шрифта не требует отказываться от иерархии дизайн-системы.
Используйте govuk-heading-l для вопроса о запросе и govuk-body для поясняющего текста. На небольших экранах размер заголовка составляет 27/30px, на больших — 36/40px. В v6 размер основного текста остаётся 19/25px. Размер основного текста 16px на небольшом экране соответствовал бы прежнему поведению, а не этому справочнику.
В таблице шкалы приведены оба размера, поскольку по снимку экрана одного разрешения нельзя определить правило адаптивного изменения. В рабочем CSS используются относительные единицы. Класс, например govuk-heading-l, задаёт внешний вид, но не определяет, должен ли семантический элемент быть h1 или h2.
scss
.app-question-note {
@include govuk-font($size: 19);
}
// Size and line-height only, without changing the font family:
.app-existing-font { @include govuk-font-size($size: 19); }
Адаптивные единицы не равны фиксированным пикселям
Интервал 6 удобно использовать между группами вопросов: на узком экране он составляет 20px, а выше планшетной контрольной точки — 30px. Статический вспомогательный метод govuk-spacing(6) возвращает 30px при любой ширине. Выбор этого метода меняет поведение, даже если на настольном экране оба варианта выглядят одинаково.
Максимальная ширина стандартного контейнера составляет 1020px. Внутри него колонка сетки шириной две трети ограничивает область вопросов и при этом позволяет сохранить выравнивание внешней структуры страницы. На небольшом экране элементы естественно располагаются друг под другом. В предварительном просмотре сохраняется эта иерархия чтения: каждое поле не растягивается на отдельную карточку панели управления.
html
<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Tell us about the event</h1>
<!-- Question form -->
</div>
</div>
</main>
</div>
Используйте названия ролей, а не подгоняйте цвета под старые снимки экрана
В версии 6 функциональный цвет ссылок — #1a65a6, а цвет ошибок — #ca3535. В реальной сборке Sass используйте govuk-functional-colour("link") и govuk-functional-colour("error"), чтобы при обновлении применялась актуальная палитра. Эти функциональные роли отличаются от выбора обычного красного или синего для иллюстрации.
Жёлтый цвет используется для обозначения фокуса. Он не должен становиться цветом выделения по умолчанию или рекламным акцентом. В предварительном просмотре жёлтый сочетается с тёмным текстом и заметной тёмной границей; ошибка обозначается текстом и расположением, а не только красным цветом.
Пример поля ввода объединяет govuk-form-group, govuk-label, govuk-hint и govuk-input. Подпись связана с идентификатором поля, а aria-describedby указывает на подсказку. При ошибке добавьте идентификатор сообщения об ошибке, а также классы ошибки. Красная рамка без такой связи — неполная реализация.
В этой форме запроса вместе указаны название мероприятия и контактный адрес электронной почты. Это два отдельно подписанных поля в рамках короткой задачи, а не требование размещать каждое поле на отдельной странице. В предварительном просмотре оба поля обязательны только для демонстрации валидации; это не означает, что они действительно требуются для какого-либо разрешения.
Постоянная подпись: «Название мероприятия».
Постоянная подсказка: «Используйте название, указанное в информации о мероприятии».
Исправимая ошибка: «Введите название мероприятия».
У нативной разметки и поведения приложения разные задачи
GOV.UK Frontend оформляет компоненты и добавляет им поведение. Библиотека не определяет, какой адрес электронной почты подходит для этой услуги, не сохраняет черновик и не получает запрос. В предварительном просмотре JavaScript проверяет два поля и хранит их значения только на текущей странице. При перезагрузке страницы данные удаляются.
Дизайн-система GOV.UK Исправление ошибок по ссылкам
Сделайте сводку переходом к исправлению
После нажатия «Продолжить» при ошибке покажите сводку перед формой и переместите на неё фокус. Каждая ссылка в списке ведёт к соответствующему ответу. Для отдельного текстового поля укажите идентификатор поля; для группы вариантов выбора используйте соответствующий первый элемент управления, как описано в официальных рекомендациях.
Для улучшения нативной сводки используется data-module="govuk-error-summary". В предварительном просмотре сводка появляется только при ошибке валидации, после чего из локального модуля версии 6.5.1 создаётся ErrorSummary. Библиотека управляет фокусом и переходами по ссылкам; приложение задаёт сообщения, сохраняет значения и удаляет устаревшие ошибки.
Нажмите «Продолжить», оставив оба поля пустыми. Перейдите по ссылке к ошибке в названии мероприятия, введите вымышленное название, затем укажите неверный адрес электронной почты. Нажмите «Продолжить» ещё раз: должна появиться только оставшаяся ошибка, а название должно сохраниться. Исправьте адрес, чтобы перейти к проверке ответов. Так становится виден сценарий взаимодействия с состоянием, а не просто отображается постоянный пример ошибки.
Дизайн-система GOV.UK Проверка ответов и изменение
Используйте список определений, а не таблицу данных
На странице проверки ответов используется govuk-summary-list. Каждая строка содержит ключ dt, значение dd и область действий dd. Скрытая подпись после ссылки «Изменить» указывает, какой именно ответ можно исправить. Длинные названия мероприятий переносятся в блоке значения, не скрывая ссылку для редактирования.
Действие «Изменить» возвращает к форме и устанавливает фокус на выбранное поле. При продолжении форма снова проходит валидацию, после чего открывается обновлённая страница проверки. Возврат реализуется кодом приложения; дизайн-система предоставляет структуру оформления.
Демонстрация заканчивается проверкой ответов, поскольку никакая служба не получает данные. В реальной службе перед отправкой должна быть страница проверки, показывающая всю передаваемую информацию. Для приложения с подтверждениями или подтверждением со стороны серверной части потребуется дополнительная логика; зелёная панель сама по себе такого результата не обеспечивает.
Заполните оба поля вымышленными данными и перейдите дальше.
Выберите «Изменить название мероприятия» и отредактируйте только этот ответ.
Продолжите и убедитесь, что исправленное название и сохранённый адрес электронной почты отображаются вместе.
В приведённой ниже инструкции используются govuk-frontend@6 и Dart Sass с импортёром пакетов Node.js. Инструкция собирает конфигурацию шрифтов без фирменного оформления, описанную в документации, и копирует браузерный дистрибутив JavaScript. Зафиксируйте разрешённый файл блокировки зависимостей, чтобы в реальном проекте была записана точная версия.
Пример не загружает шрифт Transport и не использует государственные изображения. Служба, которой требуется фирменное оформление, должна также предоставлять официальные ресурсы по указанному в документации пути. Приложения с другими инструментами сборки могут использовать тот же модуль Sass и точку входа initAll, адаптировав сборку под свою систему.
Выполните инициализацию после добавления разметки компонентов
В отдельном предварительном просмотре локально используются официальные CSS и JavaScript версии 6.5.1. Переопределение шрифта с узкой областью действия заменяет Transport во всей демонстрации. Валидация формы и страница проверки реализованы кодом приложения, а улучшение поведения Button и ErrorSummary обеспечивает библиотека. В отдельной инструкции описан предпочтительный вариант настройки с помощью Sass; здесь эта сборка не выполнялась.
Текстовое поле: подпись, подсказка и встроенное сообщение об ошибке
В состоянии с ошибкой к группе и полю добавляется модификатор ошибки. Описание поля связывает постоянную подсказку и текущую ошибку по идентификаторам.
html
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="event-name">Event name</label>
<div id="event-name-hint" class="govuk-hint">Use the name shown on your event information.</div>
<p id="event-name-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter an event name
</p>
<input class="govuk-input govuk-input--error" id="event-name"
name="eventName" type="text"
aria-describedby="event-name-hint event-name-error">
</div>
В состоянии без ошибки удалите абзац с сообщением, модификаторы ошибки и идентификатор ошибки из aria-describedby.
При ошибке валидации сохраняйте фактическое значение; используйте экранированный вывод сервера или присваивание текста/значения через DOM.
Сводка ошибок: переход к ответу
Разместите сводку перед содержимым вопроса. Её сообщение должно совпадать со встроенной ошибкой, а ссылка должна вести к полю, а не к постороннему контейнеру.
html
<div class="govuk-error-summary" data-module="govuk-error-summary">
<div role="alert">
<h2 class="govuk-error-summary__title">There is a problem</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li><a href="#event-name">Enter an event name</a></li>
</ul>
</div>
</div>
</div>
При нативной реализации инициализация Frontend задаёт поведение фокуса для сводки.
В демонстрации после добавления каждой сводки ошибок при неудачной валидации создаётся новый ErrorSummary; логика валидации остаётся отдельной частью приложения.
Проверка ответов: семантический список сводки
Список определений связывает подпись ответа с его значением и ссылкой для перехода к редактированию. Скрытый суффикс позволяет различать повторяющиеся ссылки «Изменить».
Параметр returnTo — используемое здесь соглашение приложения, а не API Frontend.
После редактирования вернитесь к проверке, сохранив все остальные ответы без изменений.
Полный автономный пример
Полный документ включает разметку, элементы управления и инициализацию. Распакуйте связанный архив примера, чтобы получить нужные относительные пути к ресурсам поставщика, затем запустите его через HTTP-сервер.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Event enquiry — OpenDesign component study</title><link rel="stylesheet" href="vendor/govuk-6.5.1/govuk-frontend.min.css"><style>
body{margin:0;background:#fff}body,body *,body *::before,body *::after{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}[hidden]{display:none!important}.study-header{border-bottom:1px solid #cecece;padding:15px 0;background:#f3f3f3}.study-header p{margin:0}.study-header strong{display:block;margin-bottom:5px}.study-note{border-top:1px solid #cecece;padding-top:20px;margin-top:30px}.study-actions{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}.govuk-summary-list__value{overflow-wrap:anywhere}main:focus,h1:focus{outline:none}.govuk-width-container{max-width:1020px}.study-tools{margin:20px 0}.study-tools button{font:inherit;background:none;border:0;padding:0;color:#1a65a6;text-decoration:underline;cursor:pointer}.study-tools button:focus{outline:3px solid #ffdd00;background:#ffdd00;color:#0b0c0c}.study-header .govuk-body-s{max-width:75ch}
</style></head><body class="govuk-template__body"><script>document.body.className+=' js-enabled'+('noModule' in HTMLScriptElement.prototype?' govuk-frontend-supported':'');</script>
<a class="govuk-skip-link" href="#main-content">Skip to main content</a>
<header class="study-header"><div class="govuk-width-container"><p class="govuk-body-s"><strong>OpenDesign · Component study</strong>GOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.</p></div></header>
<main class="govuk-width-container govuk-main-wrapper" id="main-content"><div class="govuk-grid-row"><div class="govuk-grid-column-two-thirds">
<section id="questions"><div id="errors"></div><h1 class="govuk-heading-l" id="question-title" tabindex="-1">Tell us about the event</h1><p class="govuk-body">Enter fictional details to try linked validation and the check-answers pattern.</p>
<form id="event-form" novalidate>
<div class="govuk-form-group" id="name-group"><label class="govuk-label" for="event-name">Event name</label><div class="govuk-hint" id="event-name-hint">Use the name shown on your event information.</div><input class="govuk-input" id="event-name" name="eventName" type="text" aria-describedby="event-name-hint"></div>
<div class="govuk-form-group" id="email-group"><label class="govuk-label" for="contact-email">Contact email</label><div class="govuk-hint" id="contact-email-hint">For example, [email protected]. Use a fictional address.</div><input class="govuk-input" id="contact-email" name="email" type="email" spellcheck="false" autocomplete="email" aria-describedby="contact-email-hint"></div>
<button class="govuk-button" data-module="govuk-button" type="submit">Continue to check answers</button>
</form><div class="study-tools govuk-body-s"><button id="fill" type="button">Use example details</button></div></section>
<section id="review" hidden><a class="govuk-back-link" href="#questions" id="back">Back</a><h1 class="govuk-heading-l govuk-!-margin-top-6" tabindex="-1" id="review-title">Check your answers</h1><dl class="govuk-summary-list"><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Event name</dt><dd class="govuk-summary-list__value" id="review-name"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#event-name" data-field="event-name">Change<span class="govuk-visually-hidden"> event name</span></a></dd></div><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Contact email</dt><dd class="govuk-summary-list__value" id="review-email"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#contact-email" data-field="contact-email">Change<span class="govuk-visually-hidden"> contact email</span></a></dd></div></dl><h2 class="govuk-heading-m">This example ends at review</h2><p class="govuk-body">Nothing has been submitted. Your answers stay in this page until it is reset or reloaded.</p><button class="govuk-button govuk-button--secondary" data-module="govuk-button" id="reset" type="button">Start again</button></section>
<aside class="study-note"><h2 class="govuk-heading-s">Try the recovery path</h2><ol class="govuk-list govuk-list--number"><li>Continue with empty fields to show the error summary.</li><li>Follow an error link, enter a title and an invalid email.</li><li>Correct the email, then change an answer from review.</li></ol><p class="govuk-body-s">Native component CSS and ErrorSummary behaviour. Local application logic only. No government logo, Transport font, external request or stored account.</p><p class="govuk-body-s"><a class="govuk-link" href="https://design-system.service.gov.uk/components/error-summary/" target="_blank" rel="noreferrer">Official error summary reference</a> · <a class="govuk-link" href="vendor/govuk-6.5.1/LICENSE.txt">Frontend licence</a></p></aside>
</div></div></main><script type="module">
import {initAll, ErrorSummary} from './vendor/govuk-6.5.1/govuk-frontend.min.js';
initAll();
const q=document.querySelector('#questions'),r=document.querySelector('#review'),form=document.querySelector('#event-form'),holder=document.querySelector('#errors');
const fields=[{id:'event-name',group:'name-group',empty:'Enter an event name'},{id:'contact-email',group:'email-group',empty:'Enter a contact email',invalid:'Enter an email address in the correct format, like [email protected]'}];
function clearErrors(){holder.replaceChildren();for(const f of fields){document.getElementById(f.group).classList.remove('govuk-form-group--error');const input=document.getElementById(f.id);input.classList.remove('govuk-input--error');input.removeAttribute('aria-invalid');input.setAttribute('aria-describedby',f.id+'-hint');document.getElementById(f.id+'-error')?.remove();}document.title='Event enquiry — OpenDesign component study';}
function edit(id='event-name'){r.hidden=true;q.hidden=false;document.getElementById(id).focus();}
form.addEventListener('submit',event=>{event.preventDefault();clearErrors();const errors=[];for(const f of fields){const input=document.getElementById(f.id);const value=input.value.trim();const message=!value?f.empty:(f.id==='contact-email'&&(!input.validity.valid||!value.includes('@'))?f.invalid:null);if(message){errors.push({id:f.id,message});document.getElementById(f.group).classList.add('govuk-form-group--error');input.classList.add('govuk-input--error');input.setAttribute('aria-invalid','true');input.setAttribute('aria-describedby',f.id+'-hint '+f.id+'-error');const p=document.createElement('p');p.id=f.id+'-error';p.className='govuk-error-message';const hidden=document.createElement('span');hidden.className='govuk-visually-hidden';hidden.textContent='Error: ';p.append(hidden,document.createTextNode(message));input.before(p);}}
if(errors.length){const summary=document.createElement('div');summary.className='govuk-error-summary';summary.dataset.module='govuk-error-summary';summary.innerHTML='<div role="alert"><h2 class="govuk-error-summary__title">There is a problem</h2><div class="govuk-error-summary__body"><ul class="govuk-list govuk-error-summary__list"></ul></div></div>';for(const err of errors){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+err.id;a.textContent=err.message;li.append(a);summary.querySelector('ul').append(li);}holder.append(summary);new ErrorSummary(summary);document.title='Error: Event enquiry — OpenDesign component study';return;}
document.getElementById('review-name').textContent=document.getElementById('event-name').value;document.getElementById('review-email').textContent=document.getElementById('contact-email').value;q.hidden=true;r.hidden=false;document.getElementById('review-title').focus();document.title='Check your answers — OpenDesign component study';});
document.querySelectorAll('.change').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();edit(a.dataset.field)}));document.getElementById('back').addEventListener('click',e=>{e.preventDefault();edit()});document.getElementById('fill').addEventListener('click',()=>{clearErrors();document.getElementById('event-name').value='Riverside community picnic';document.getElementById('contact-email').value='[email protected]';document.getElementById('event-name').focus()});document.getElementById('reset').addEventListener('click',()=>{form.reset();clearErrors();edit();document.getElementById('question-title').focus()});
</script></body></html>
Скачайте полный пример из раздела «Источники». Точная команда локального запуска приведена в README.
Оставьте пути к ресурсам поставщика относительными к этому документу; архив включает все ресурсы, используемые в предварительном просмотре.
04
Дизайн-система GOV.UK Настройка ИИ-агента
Отправная точка для реализации
Разместите команды оболочки, содержимое app.scss и фрагменты HTML в указанных для них местах. В предварительном просмотре используются локальные копии официальных ресурсов версии 6.5.1 с переопределением шрифта; инструкция по сборке Sass приведена, но в этой рабочей области сборка не выполнялась. В ZIP-архиве с полным рабочим примером в разделе «Источники» также указаны точные зависимости предварительного просмотра и находится полный документ. Распакуйте архив, выполните в этой папке python3 -m http.server 8080 и откройте http://localhost:8080/gov-uk.html. Не открывайте примеры с модулями через file://.
sh / scss / html
# Run in a project directory
npm install [email protected]
npm install --save-dev sass
mkdir -p public/assets
# Save the following as app.scss
@use "pkg:govuk-frontend" as * with (
$govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif)
);
# Compile, then copy the browser module
npx sass --pkg-importer=node app.scss public/assets/app.css
cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/
<!-- In the HTML head -->
<link rel="stylesheet" href="/assets/app.css">
<!-- At the start of body -->
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- After the question / summary markup -->
<script type="module">
import { initAll } from '/assets/govuk-frontend.min.js';
initAll();
</script>
Запрос для вашего проекта
Промпт для AI-агента
Реализуйте форму запроса по мероприятию из двух полей с помощью GOV.UK Frontend v6 и конфигурации без фирменного оформления со шрифтом Helvetica, описанной в этом руководстве. Используйте фактические структуры form-group/input/error-summary и summary-list, связанные встроенные сообщения об ошибках, сохранение ответов, ссылки «Изменить» с переходом к нужному полю и завершение только на этапе проверки. Примените адаптивную типографику и интервалы с помощью классов Frontend. Сохраните реальную идентичность проекта и не создавайте фиктивную официальную отправку или несуществующий результат серверной обработки. Проверьте состояния: пустые поля, неверный адрес электронной почты, исправленные данные, проверка ответов и изменение ответа.
05
Дизайн-система GOV.UK Источники и область применения
Независимое приложение-пример OpenDesign с компонентами GOV.UK Frontend 6.5.1 CSS и JavaScript. Оно не предполагает использование государственного логотипа или шрифта Transport, не является официальной службой, не отправляет реальные данные и не подтверждает соответствие требованиям. Правила формы и переход к проверке реализованы собственным кодом приложения.
