# Дизайн-система ONS

## Дизайн-система ONS Предпросмотр интерфейса

Попробуйте несколько способов передвижения, противоположный ответ, проверку пустого поля, локальный просмотр и сохранение изменений.

## Дизайн-система ONS Справочник по дизайну

ONS Design System 73.13.1 скомпилирован: CSS, JavaScript и переменные Sass проверены по общедоступному руководству по стилю. В примере используются нативные компоненты Checkbox и Mutually Exclusive. В отдельном примере вместо OpenSans используется Arial; в инструкции по сборке для production предусмотрено копирование упакованных шрифтов. Вопрос о поездке и локальная проверка — оригинальный демонстрационный контент.

### Таблица типографики

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Primary family | OpenSans, Helvetica Neue, Arial, sans-serif | В официальных рекомендациях по шрифтам указан Open Sans со стилистическим набором 1; в демонстрации намеренно используется Arial. |
| ons-u-fs-3xl | 32/44px → 48/56px | От малого к крупному на среднем брейкпоинте; насыщенность700. |
| ons-u-fs-2xl | 28/40px → 36/48px | Насыщенность700; иерархия для заголовков. |
| ons-u-fs-xl / ons-u-fs-l | 26/36 → 30/40px; 24/32 → 26/36px | Нативные адаптивные размеры и интерлиньяж, а не плавное значение clamp. |
| ons-u-fs-m | 20/28px → 22/32px | Насыщенность700. |
| ons-u-fs-r / ons-u-fs-s | 18/28px / 14/20px | Обычное начертание400; варианты --b используют700. |
### Семантические роли цветов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --ons-color-text | #222 | Соответствует --ons-color-black. |
| --ons-color-text-link | #206095 | Океанический синий; при наведении и активации — ночной синий #003c57. |
| --ons-color-focus | #fbc900 | Жёлтый солнечный — цвет индикации фокуса. |
| --ons-color-button | #0f8243 | Листовой зелёный; отличается от цвета ссылок. |
| --ons-color-errors | #d0021b | Рубиновый красный для ошибок в паре с текстовым пояснением. |
| --ons-color-info-tint | #e9eff4 | Фон информационной панели; не является заменой выбранного флажка. |
### Фактические утилиты отступов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| ons-u-mb-xs / s / m | 12px /16px /20px | Значения утилит нижнего отступа при корневом размере 16px. Некоторые из них не входят в описанную базовую сетку 8px. |
| ons-u-mb-l / xl | 24px /32px | Используйте утилиты опубликованного релиза; не выводите все значения из описания базовой сетки. |
### Модель компоновки и адаптивности

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Grid | 12 percentage-width columns | ons-grid > ons-grid__col с адаптивными классами колонок. |
| Medium column | ons-col-8@m | С 740px — восемь колонок; при меньшей ширине — вся доступная ширина. |
| Breakpoints | 300,400,500,740,980,1300,1600px | 2xs,xs,s,m,l,xl,2xl. |
| Baseline | Multiples of8px | Ритм сетки в документации; не считайте, что все границы и шрифты ему соответствуют. |
| Documented gutters | 16px below600;24px at600+ | Перед переопределением классов сетки проверьте выпуск CSS. |
| Default container | 64.6256rem maximum;1rem horizontal padding | Проверено на73.13.1 CSS, примерно1034px при корневом размере 16px. |
### Механизмы взаимоисключения

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Group root | ons-js-mutually-exclusive | Нативный скрипт находит этот контейнер, когда DOM готов. |
| Regular options | ons-js-exclusive-group-item | Варианты можно сочетать; выбор одного снимает противоположный взаимоисключающий вариант. |
| Opposing choice | ons-js-exclusive-option | При выборе обычные варианты группы снимаются. |
| Explanation | data-deselect-message | Предупреждение о противоположном варианте. |
| Announcement | ons-js-exclusive-alert | Живая область с атрибутами data-group-adjective и data-option-adjective. |
| State updates | click for checkbox/radio;input for text | Контроллер кэширует hasValue; для сброса в приложении используйте нативные события. |
## Дизайн-система ONS Полное руководство

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система ONS Особенности дизайна анкеты

### Сохраните смысл ответа

> ONS занимается как сбором статистических данных, так и публикацией информационных материалов. В анкете взаимоисключающие ответы важны для качества данных: пользователь не должен одновременно указать способ передвижения и сообщить, что поездки не было. Нативный компонент Mutually Exclusive связывает эти варианты и с помощью пояснения помогает пользователям вспомогательных технологий понять, почему выбор снимается.

В примере задан оригинальный вопрос о поездке в библиотеку и предусмотрен локальный просмотр ответа. Здесь намеренно не используются фирменные изображения ONS и не утверждается, что ответы собираются. Для реального опроса потребуются собственные правила согласия, хранения данных, маршрутизации и серверной проверки.

Прочитать вспомогательную спецификацию

## Дизайн-система ONS Понятная иерархия вопросов

### Легенда может служить заголовком страницы

Основной шрифт — Open Sans со стилистическим набором 1, выбранным за характерные формы букв. В нативной таблице типографики Sass заданы фиксированные малые и крупные значения, а не придуманная непрерывная шкала. Для основного текста используются размер 18px и интерлиньяж 28px. Основной крупный класс на среднем брейкпоинте меняется с 32/44 на 48/56.

На странице с одним вопросом заголовок h 1 можно поместить в легенду fieldset, чтобы доступное имя группы совпадало с видимым заголовком. Не добавляйте перед ним второй несвязанный h 1. В примере контекст сервиса вынесен в абзац меньшего размера, а инструкция по выбору расположена под легендой.

В автономной демонстрации явно используется Arial, поэтому отсутствуют запросы к недоступным шрифтам. В инструкции по установке шрифты копируются вместе с CSS; это необходимо, если вместо резервного шрифта должен использоваться опубликованный OpenSans.

Прочитать вспомогательную спецификацию

## Дизайн-система ONS Роли в интерфейсе опроса

### Фокус и статус — разные вещи

ONS назначает семантические переменные базовым цветам. Для текста используется чёрный, для обычных ссылок — океанический синий, для основной кнопки — листовой зелёный. Цвет фокуса — солнечный жёлтый. Рубиновый красный обозначает ошибку, но сообщение об ошибке всё равно должно объяснять, что нужно сделать. Зелёная кнопка «Продолжить» не означает, что ответ уже прошёл проверку.

В локальной анкете используются нативная рамка и оформление выбранного состояния флажка. Ответы не оформлены каждый в виде отдельной маркетинговой карточки. Короткая нейтральная линия сверху отделяет самостоятельный пример от вопроса, не копируя шапку ONS.

- Сохраните видимое нативное оформление фокуса и на флажке, и на кнопке действия.

- Перед обычными вариантами разместите инструкцию «Выберите все подходящие варианты».

- Отделите противоположный ответ словом «Или», чтобы различие было понятно ещё до взаимодействия.

Прочитать вспомогательную спецификацию

## Дизайн-система ONS Колонки и ширина ответов

### Используйте ширину, предусмотренную для анкеты

Ширина в двенадцатиколоночной сетке задаётся классами, например ons-col-8@m. При ширине 740px и выше такой класс занимает восемь колонок; ниже этого значения тот же элемент заполняет всю доступную ширину контента. В локальном примере используется эта нативная колонка: длинный вопрос переносится в удобном для чтения формате, а не растягивается на весь экран.

В проверенном релизе максимальная ширина стандартного контейнера составляет 64.6256rem, а горизонтальный внутренний отступ — 1rem. В общедоступном руководстве по сетке также указана базовая сетка 8px и промежутки 16/24px при границе интервалов 600px. Не смешивайте эти положения со средним брейкпоинтом колонки 740px: это не единый универсальный порог для мобильных устройств.

При просмотре ответов вопрос заменяется в той же колонке, а кнопка «Изменить ответы» возвращает пользователя к имеющимся элементам управления. Значения остаются в памяти; перехода по маршруту и сетевого запроса нет.

Доступные утилиты интервалов подробнее, чем указано в описании базовой сетки 8px: нижние отступы xs, s, m, l и xl при корневом размере 16px составляют 12,16,20,24 и 32px. Поэтому в справочнике фактические значения утилит приведены отдельно от рекомендаций по сетке.

Прочитать вспомогательную спецификацию

## Дизайн-система ONS Создание группы ответов

### Структура нативного флажка

Для флажка внутри ons-checkbox используются ons-checkbox__input и связанный с ним ons-checkbox__label. У поля сохраняются обычные атрибуты name и value, поэтому стандартная семантика формы продолжает работать. Более общая структура ons-checkboxes__item обеспечивает отступы и область нажатия, предусмотренные таблицей стилей.

Для обычных вариантов используется общий класс ons-js-exclusive-group-item. Для последнего варианта вместо него применяется ons-js-exclusive-option с атрибутом data-deselect-message, поясняющим эффект выбора. Элемент span для области динамических объявлений должен присутствовать с обоими атрибутами-прилагательными: это не просто декоративная разметка. Его удаление нарушит предположения нативного контроллера.

Этот исходный пример полностью описывает три обычных варианта и один противоположный ответ. Адаптируйте существительные и значения к реальному вопросу; не ограничивайтесь тем, что переименуете несвязанный элемент управления проверкой в «взаимоисключающий».

```
<fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset>
```

Справочник по коду

Прочитать вспомогательную спецификацию

## Дизайн-система ONS Проверка и поведение при изменении

### Состояние библиотеки и состояние приложения

Библиотека отвечает за снятие отметок с противоположных вариантов. Небольшой обработчик приложения в примере лишь проверяет, выбран ли хотя бы один ответ, прежде чем отобразить локальный экран проверки. Если ничего не выбрано, он показывает текст ошибки и переводит фокус на связанное сообщение. Ссылка из ошибки ведёт прямо к первому варианту, где пользователь может выполнить действие.

Помимо значения флажка в DOM, контроллер отслеживает кэшированное состояние hasValue. Если сбросить флажок только с помощью checked=false, кэш может остаться устаревшим. Поэтому действие сброса нажимает каждый отмеченный элемент, позволяя нативным обработчикам обновить модель, а затем возвращает фокус к вопросу. Это конкретный аспект интеграции, который нельзя проверить, просто посмотрев на таблицу стилей.

На экране проверки выбранные варианты представлены списком подписей. Действие «Изменить ответы» сохраняет элементы управления и их выбранное состояние. Экран не утверждает, что ответ на опрос получен: за этим образцом не стоит сервер.

Прочитать вспомогательную спецификацию

## Дизайн-система ONS Подключение ресурсов и шаблонов

### Два поддерживаемых способа

В npm-пакет входят скомпилированные ресурсы, исходники Sass, макросы Nunjucks и базовый шаблон страницы. В этом примере используется способ с готовыми ресурсами HTML: скопируйте официальные CSS и main.js, воспроизведите документированную разметку, а затем загрузите скрипт после содержимого body. Когда DOM будет готов, скрипт инициализирует соответствующие хуки компонентов.

В проекте с серверным рендерингом вместо этого можно использовать файлы макросов Nunjucks из каталога components. Макрос Checkbox принимает массив флажков, подписи, описания, параметры ошибок и настройки mutuallyExclusive. Если задать dontWrap, ответственность за fieldset переходит к внешнему компоненту вопроса; это не способ отказаться от доступного названия группы.

При выборе отдельных файлов Sass сначала импортируйте системные переменные, вспомогательные функции, утилиты, базовые стили и объекты, затем правила компонентов и все их зависимости. Полный скомпилированный CSS позволяет не подбирать зависимости для этого небольшого автономного примера.

1. Зафиксируйте версию пакета и размещайте css, скрипты и шрифты в одном стабильном локальном каталоге ресурсов.

2. Для статической страницы используйте скомпилированный HTML, а для приложения с серверным рендерингом настройте пути к макросам Nunjucks.

3. Используйте CSS, JavaScript и разметку из одного релиза; после обновления повторно проверьте взаимоисключение.

Прочитать вспомогательную спецификацию

## Дизайн-система ONS Проверьте противоречивые ответы

### Проверьте смысл данных

Выберите «Пешком» и «Автобус», затем выберите «Я не посещал библиотеку». Оба предыдущих варианта должны сняться. Затем выберите «Велосипед»: противоположный ответ должен сняться, а отметка у «Велосипед» — сохраниться. Повторите действия клавишей Space на элементах в фокусе и проверьте область объявлений, а не полагайтесь только на визуальную отметку.

Продолжите без выбора, чтобы проверить ошибку, затем проверьте корректный ответ и вернитесь с помощью действия «Изменить ответы». В завершение выполните сброс после последовательности противоречивых ответов и выберите другой вариант: так можно обнаружить устаревшее состояние нативного контроллера. При ширине экрана 390px вопрос и все подписи должны оставаться читаемыми без горизонтальной прокрутки страницы.

Эти тесты проверяют локальное взаимодействие, но не отправку данных в производственный опрос, сертификацию доступности или статистическое качество вопроса. Для реального сервиса по-прежнему нужна серверная проверка противоречивых значений и исследование того, все ли категории ответов предусмотрены.

Прочитать вспомогательную спецификацию

## Дизайн-система ONS Примеры компонентов дизайн-системы

### Полный пример вопроса с взаимоисключающими вариантами

Обычные варианты ответа и противоположный ответ с нативными хуками области динамических объявлений.

```
<fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset>
```

Справочник по коду

### Используйте ресурсы из одного и того же релиза

Способ с подключением скомпилированных ресурсов, включая относительные пути к шрифтам для полноценного проекта.

```
npm install --save-exact @ons/design-system@73.13.1
mkdir -p public/vendor/ons
cp -R node_modules/@ons/design-system/css public/vendor/ons/
cp -R node_modules/@ons/design-system/scripts public/vendor/ons/
cp -R node_modules/@ons/design-system/fonts public/vendor/ons/

<!-- In your page head -->
<link rel="stylesheet" href="/vendor/ons/css/main.css">
<!-- Place the compiled component markup in the body. -->
<!-- Immediately before </body>; initializes matching component hooks -->
<script src="/vendor/ons/scripts/main.js"></script>
```

Справочник по коду

### Полный автономный пример

Полный документ включает разметку, элементы управления и инициализацию. Распакуйте связанный архив примера, чтобы получить нужные относительные пути к ресурсам поставщика, затем запустите его через HTTP-сервер.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ONS survey question specimen</title><link rel="stylesheet" href="vendor/ons-73.13.1/css/main.css"><style>body,input,button,select,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.specimen{border-top:4px solid var(--ons-color-ocean-blue);padding-top:16px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}[hidden]{display:none!important}.error{border-left:4px solid var(--ons-color-errors);padding:16px;margin:24px 0;color:var(--ons-color-errors)}.quiet{color:var(--ons-color-text-light)}fieldset{min-width:0}.ons-checkbox__label{max-width:100%}</style><main class="ons-container"><p class="ons-u-fs-s specimen">Independent specimen · Original library survey</p><div class="ons-grid"><div class="ons-grid__col ons-col-8@m"><section id="question"><p class="quiet">Travel · Question 1 of 1</p><div id="error" class="error" tabindex="-1" hidden><strong>Select a travel method or tell us you did not visit.</strong><p><a href="#walk">Go to the answer choices</a></p></div><form id="survey" novalidate><fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset><div class="actions"><button class="ons-btn" type="submit"><span class="ons-btn__inner">Review answer</span></button><button id="reset" type="button" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Reset</span></button></div></form><p class="ons-u-mt-l ons-u-fs-s quiet">Practice only. Your selection stays in this page and is not submitted.</p></section><section id="review" hidden><h1 tabindex="-1">Review your answer</h1><h2 class="ons-u-fs-m">Travel to the library last week</h2><ul id="answer"></ul><p>No response has been sent. Return to the question to change your selection.</p><button id="change" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Change answers</span></button></section></div></div></main><script src="vendor/ons-73.13.1/scripts/main.js"></script><script>const form=document.querySelector('#survey'),q=document.querySelector('#question'),r=document.querySelector('#review'),err=document.querySelector('#error'),checks=[...form.querySelectorAll('input[type=checkbox]')];form.onsubmit=e=>{e.preventDefault();const chosen=checks.filter(x=>x.checked);if(!chosen.length){err.hidden=false;err.focus();return}err.hidden=true;document.querySelector('#answer').replaceChildren(...chosen.map(x=>{let li=document.createElement('li');li.textContent=document.querySelector('label[for="'+x.id+'"]').textContent.replace(/^Or, /,'');return li}));q.hidden=true;r.hidden=false;r.querySelector('h1').focus()};document.querySelector('#change').onclick=()=>{r.hidden=true;q.hidden=false;checks[0].focus()};document.querySelector('#reset').onclick=()=>{checks.filter(x=>x.checked).forEach(x=>x.click());err.hidden=true;checks[0].focus()};window.demoReady=true;</script></html>
```

Справочник по коду

- Скачайте полный пример из раздела «Источники». Точная команда локального запуска приведена в README.

- Оставьте пути к ресурсам поставщика относительными к этому документу; архив включает все ресурсы, используемые в предварительном просмотре.

## Дизайн-система ONS Настройка агента

### Отправная точка для реализации

В локальном примере используются скомпилированные CSS и JavaScript Native 73.13.1. Arial — явно заданный локальный резервный шрифт; в инструкциях для производственной среды указаны входящие в пакет шрифты OpenSans. Полный ZIP-архив рабочего примера в разделе Sources также содержит точные зависимости для предпросмотра и полный документ. Распакуйте его, выполните в этой директории python3 -m http.server 8080, затем откройте http://localhost:8080/ons.html. Не открывайте примеры с модулями через file://.

```
npm install --save-exact @ons/design-system@73.13.1
mkdir -p public/vendor/ons
cp -R node_modules/@ons/design-system/css public/vendor/ons/
cp -R node_modules/@ons/design-system/scripts public/vendor/ons/
cp -R node_modules/@ons/design-system/fonts public/vendor/ons/

<!-- In your page head -->
<link rel="stylesheet" href="/vendor/ons/css/main.css">
<!-- Place the compiled component markup in the body. -->
<!-- Immediately before </body>; initializes matching component hooks -->
<script src="/vendor/ons/scripts/main.js"></script>
```

### Запрос для вашего проекта

```
Создайте независимый образец опроса на ONS73.13.1, используя нативные хуки Checkbox и Mutually Exclusive, связанные fieldset/legend, группу обычных вариантов ответа и один противоположный ответ. Добавьте обязательную область динамических объявлений и атрибуты снятия отметки. Подключите соответствующие нативные CSS и main.js; не создавайте собственный контроллер взаимоисключения. Добавьте локальную проверку пустого ответа и просмотр ответа с сохранением изменений, не заявляя о получении данных сервером. Выполняйте сброс через нативные события, чтобы состояние кэша оставалось согласованным. Используйте ons-col-8@m и проверенные правила типографики и семантических цветов, не добавляя официальные элементы фирменного стиля.
```

## Дизайн-система ONS Источники и область применения

Независимый пример реализации с оригинальным текстом опроса. Нативный код лицензирован по MIT; лицензирование айдентики и содержимого ONS регулируется отдельно. Ответы не передаются, не сохраняются и не представляются как официальная статистика.

- Тип Шрифты и адаптивная типографическая иерархия.

- Цвет Рекомендации по семантическим цветам.

- Сетка Классы сетки, отступы и контрольные точки.

- Проверки Структура флажка и параметры макроса.

- Взаимоисключение Противоположные ответы и поведение при снятии отметки.

- Ресурсы Пути к ресурсам и зависимости Sass.

- Npm Содержимое и установка пакета.

- Шаблон Подключение шаблонов на стороне сервера.

- Ошибка Расположение ошибки и рекомендации по её устранению.

- Скачать полный рабочий пример ZIP-архив с полным HTML, локальными зависимостями CSS/JavaScript, лицензиями и точными инструкциями по запуску. Сборка не требуется.

## Дизайн-система ONS Связанные ресурсы

### Ontario дизайн-система

Создайте объёмное руководство в стиле Ontario с реальной типографикой, опубликованными значениями отступов и цветов, встроенным поведением аккордеона и полным исходным кодом для соответствующей версии.

### Poncho

Изучите сетку Bootstrap 3 в Poncho, семантические цвета действий и полностью кликабельные панели услуг на примере работающего каталога мероприятий.

### Queensland Government дизайн-система

Изучите реализацию Bootstrap в Queensland на примере полноценного иллюстрированного выбора ресурсов с реальными ролями темы, встроенным оформлением флажков и доступным диалогом проверки.


- [Справочник по реализации](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [Источник](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/scss/vars/_typography.scss)
- [Источник](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/scss/vars/_colors.scss)
- [Источник](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/css/main.css)
- [Источник](https://service-manual.ons.gov.uk/design-system/foundations/grid)
- [Источник](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/components/mutually-exclusive/mutually-exclusive.js)
- [Прочитать вспомогательную спецификацию](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [Прочитать вспомогательную спецификацию](https://service-manual.ons.gov.uk/design-system/foundations/typography)
- [Прочитать вспомогательную спецификацию](https://service-manual.ons.gov.uk/design-system/foundations/colours)
- [Прочитать вспомогательную спецификацию](https://service-manual.ons.gov.uk/design-system/foundations/grid)
- [Справочник по коду](https://service-manual.ons.gov.uk/design-system/components/checkboxes)
- [Прочитать вспомогательную спецификацию](https://service-manual.ons.gov.uk/design-system/components/checkboxes)
- [Прочитать вспомогательную спецификацию](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/components/mutually-exclusive/mutually-exclusive.js)
- [Прочитать вспомогательную спецификацию](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets)
- [Справочник по коду](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets)
- [Справочник по коду](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [Тип Шрифты и адаптивная типографическая иерархия.](https://service-manual.ons.gov.uk/design-system/foundations/typography)
- [Цвет Рекомендации по семантическим цветам.](https://service-manual.ons.gov.uk/design-system/foundations/colours)
- [Сетка Классы сетки, отступы и контрольные точки.](https://service-manual.ons.gov.uk/design-system/foundations/grid)
- [Проверки Структура флажка и параметры макроса.](https://service-manual.ons.gov.uk/design-system/components/checkboxes)
- [Взаимоисключение Противоположные ответы и поведение при снятии отметки.](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [Ресурсы Пути к ресурсам и зависимости Sass.](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets)
- [Npm Содержимое и установка пакета.](https://service-manual.ons.gov.uk/design-system/guidance/install-with-npm)
- [Шаблон Подключение шаблонов на стороне сервера.](https://service-manual.ons.gov.uk/design-system/guidance/templating-in-nunjucks)
- [Ошибка Расположение ошибки и рекомендации по её устранению.](https://service-manual.ons.gov.uk/design-system/components/error-summary)