Форма

Форма соединяет цель, поля, валидацию и результат в один сценарий отправки.

Статус: experimental · в системе с 2026-07

Когда использовать

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

Не использовать:

Нужно изменить одно булево значение — достаточно switch.
Данные только показываются и не редактируются.

Состав

Юнит или компонент	Роль
`code`	Код подключения или готовый фрагмент рядом с полями.
`qr-code`	Готовый QR-код подключения или подтверждения.
`lang-menu`	Выбор языка интерфейса на экране входа.
`subscription-limit`	Диапазон давности подписки в настройке аудитории.
`steps`	Положение текущего этапа в многошаговой форме.
`title`	Заголовок именованного блока или секции внутри формы.
`label`	Подпись группы контролов или значения, у которого нет собственной подписи.
`user-line`	Краткая строка владельца или автора рядом с полями и сводкой формы.
`page-navigation`	Разделы длинной формы создания: где человек сейчас и сколько осталось.
`badge`	Метка поля или секции формы: «новое», «бета», требуемый тариф.
`card`	Именованная секция формы с собственной поверхностью и дочерними узлами.
`island`	Поверхность региона без заголовка: блок полей, итог формы в подвале.
`fields-group`	Строки из равных ячеек: пары «ключ — значение», диапазоны, координаты.
`picker`	Выбор одного варианта плитками, когда у вариантов есть значок и пояснение.
`scheduler`	Расписание по часам недели: сетка вместо семи полей времени.
`description`	Пояснение под полем или группой: что человек вводит и почему.
`combo`	Повторяющийся блок формы: строки, которые человек добавляет и удаляет.
`form-modal`	Форма в модальном окне: поля в теле, пояснение или сводка — в боковой колонке.
`input`	Короткие текстовые значения.
`copy-field`	Сгенерированное значение рядом с полями, которое человек копирует, а не вводит.
`input-number`	Арифметические числа, границы и пошаговое изменение.
`slider`	Положение или две границы на известной числовой шкале.
`file-upload`	Один или несколько локальных файлов до отправки формы.
`input-time`	Одно время суток с точностью до минуты.
`input-time-range`	Начало и окончание одного внутрисуточного интервала.
`input-date`	Одна календарная дата: срок, начало действия, день события.
`input-date-range`	Период между двумя датами: срок кампании, окно отчёта.
`meter`	Известная величина внутри диапазона рядом с полями: остаток бюджета, заполненность лимита.
`select`	Один вариант из длинного или раскрываемого списка.
`combobox`	Один вариант из длинного списка, где нужен поиск по вводу.
`input-select`	Составная строка правила или фильтра: связанные селекты одной сущности в одном поле.
`multi-select`	Несколько значений из длинного плоского списка.
`tag-input`	Свободные метки без справочника: хэштеги, ключевые слова, домены.
`dualist`	Множественный выбор из длинного списка, когда выбранное важно видеть рядом с источником.
`textarea`	Многострочный текст.
`segmented-control`	Короткие взаимоисключающие режимы внутри формы.
`toggle-group`	Набор устойчивых режимов секции: несколько независимых либо ровно один.
`input-color`	Цвет как значение поля: фирменный цвет, метка, фон креатива.
`checkbox`	Один независимый признак, который уходит вместе с отправкой формы.
`checkbox-group`	Несколько независимых признаков под общим вопросом секции.
`radio`	Ровно один вариант из видимого взаимоисключающего набора.
`switch`	Настройка рядом с полями, которая применяется сразу и не ждёт отправки.
`tag`	Уже выбранные значения и метки рядом с полем, которое их порождает.
`stars`	Оценка от одной до пяти звёзд рядом с полями: качество площадки, отзыв, приоритет.
`tabs`	Равноправные панели внутри одной секции: предпросмотр или разные представления одного значения.
`accordion`	Вторичные разделы формы, которые не нужны сразу: справка и редкие настройки под свёрнутым заголовком.
`table`	Сравнение однородных строк по общим колонкам внутри секции: уже добавленные позиции или справочные значения рядом с полями.
`status`	Состояние сущности рядом с её полями: модерация, публикация или другой этап, на который человек смотрит и который иногда меняет прямо в форме.
`avatar`	Визуальный идентификатор сущности рядом с её полями: владелец записи в сводной карточке формы.
`divider`	Смысловая граница между группами внутри одной секции, когда отступа для неё недостаточно.
`icon`	Значок рядом с текстом или полем: скрыто, предупреждение, справка — без кнопки вокруг.
`thumbnail`	Иллюстрация варианта в карточке выбора: превью формата объявления или типа шаблона.
`button`	Отправка, отмена и вторичные действия формы.
`alert`	Обратная связь, относящаяся ко всей форме, а не к отдельному полю.
`breadcrumbs`	Путь к текущей странице над заголовком формы.
`link`	Переход к справке или связанной странице рядом с заголовком либо полем.
`tooltip`	Короткое пояснение к полю или кнопке по наведению — поверх формы.
`popover`	Небольшая панель с полями рядом с кнопкой: добавить правило, уточнить значение — поверх формы.
`dialog`	Подтверждение необратимого шага или уход с несохранённой формы — поверх экрана.
`entities-list-dialog`	Массив значений строками поверх поля: список доменов, id, ключей.
`toast`	Результат отправки, который не должен прерывать поток — поверх экрана.

Ограничения

Обязательно: Давать форме видимую цель и сохранять порядок полей равным порядку чтения.
Обязательно: Показывать ошибку после blur или попытки отправки и связывать её с конкретным полем.
Обязательно: Оставлять ровно одно главное действие accent; отмену оформлять как default или ghost.
Рекомендуется: Делить длинную форму на именованные секции, каждая из которых отвечает за одну локальную задачу.
Обязательно: Использовать heading для обычного раздела полей, а fieldset с legend — только когда секция является одним групповым вопросом.
Запрещено: Вводить универсальный компонент FormSection, который скрывает выбор семантики heading или fieldset/legend.
Запрещено: Блокировать всю форму из-за первой ошибки или валидировать каждый символ.

Логика отклика

Цель Пользователь понимает результат формы до ввода. Заголовок и краткая подсказка задают контекст.
Ввод Пользователь заполняет поля в естественном порядке. Label остаётся видимым; hint заранее объясняет формат.
Проверка Пользователь покидает поле или отправляет форму. Ошибка появляется у поля и объявляется assistive technology.
Результат Пользователь исправляет данные и отправляет форму. Ошибка исчезает сразу; результат показывается на уровне формы или области.

Контекстный пример

Правильно

Одна цель, именованные секции и локальная обратная связь

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

input select textarea button

Неправильно

Безымянный поток, конкурирующие действия и ранние ошибки

Разные задачи смешаны без секций, несколько accent-кнопок спорят за внимание, а сообщения меняются на каждый символ и отделены от полей.

input button

Скелет экрана

headingЦель формы и краткое объяснение.
sectionsОдин поток именованных задач; внутри каждой — связанные поля и подходящая HTML-семантика.
feedbackОбщая обратная связь только когда она относится ко всей форме.
actionsОтмена и одно главное действие; в каркасе приложения они стоят в титульной строке страницы, в каркасе входа — в конце острова, но не в потоке полей.