поля ввода и формы в UI Kit
Форма – место, где юзер чаще всего отваливается. И почти всегда не из-за сложного продукта, а из-за раздражения: поле не реагирует, ошибка непонятна, переключатель стоит там, где нужен чекбокс. Разбираю пять элементов, из которых собирается любая форма – вторая статья серии по список элементов интерфейса UI Kit
→ Text Field (текстовое поле)
Элемент, на котором чаще всего вскрываются дизайнерки проблемы интерфейса. Это не пустой прямоугольник с текстом, а один из самых нагруженных по состояниям и контексту компонентов
Что должно быть внутри
- Контент: label, value, placeholder, helper text, дочерние элементы (н-р, иконка слева и справа)
- Контейнер: фон, бордер, радиус, внутренние отступы, минимальная ширина и высота
- Поведение: состояния, заполненное и незаполненное поле, ответ системы
Если у тебя в макете только серый бордер и бледный текст «Введите имя» – это не компонент, а картинка
Состояния, без которых поле мертвое
- default – поле по умолчанию с placeholder или value
- hover – при наведении, чтобы показать, что поле активно
- focus – явное состояние с курсором и акцентом на границе
- disabled – поле выглядит недоступным к заполнению
- error – бордер или иконка ошибки плюс хелпер-текст. Вменяемое сообщение, а не просто «ошибка»
Каждое состояние собирается через варианты с токенами – цвета, текст, радиус, спейсинги – а не ручной стилизацией в каждом макете
Варианты по структуре: одиночное поле (single line), многострочное (textarea), с иконками и кнопками (поиск, календарь, показать пароль), с добавочными элементами – prefix и suffix вроде «₽», «kg», «https://»
Варианты по стилю: с бордером (outlined), с подчеркиванием (underlined), с заливкой и мягким бордером (filled)
Частая ошибка: прятать label в placeholder. Юзер начинает печатать, подпись исчезает, и он больше не помнит, что тут вводит
Прятать label в placeholder. Юзер начинает печатать, подпись исчезает, и он больше не помнит, что тут вводит
→ Select (селект)
Селект – это не просто выпадающий список, а интерактивный элемент выбора с выпадающим списком
Из чего состоит
- placeholder / value – объясняет, что тут можно выбрать или что уже выбрано
- контейнер – размеры, отступы, скругления, кликабельная зона
- иконка – шеврон, который меняет направление при раскрытии списка
- label – подсказка, что именно нужно выбрать
- helper text – подсказка и сообщение об ошибке
- дочерний компонент – сам выпадающий список
Состояния
default, hover, focus, opened (список с адекватной высотой, отступами и скроллом), select option (явное обозначение текущего выбора внутри списка), disabled – недоступен, но остается читаемым, error – не только красная рамка, но и текст, объясняющий, что пошло не так
Какие бывают
- по выбору: одиночный селект, мультиселект с чекбоксами и чипами
- по взаимодействию: выбор строго из списка, поиск по опциям
- по содержанию списка: простой текстовый список, список с иконками, список с подкатегориями
Частая ошибка
Раскрывающийся список без скролла и ограничения по высоте. Двадцать пунктов уезжают за экран, и юзер видит первые семь
→ Checkbox (чекбокс)
Кажется, что все просто: поставила галочку – задача решена. Но в реальном ките это важный элемент форм и списков, и если анатомию не продумать, юзер будет спрашивать «куда кликать»
Что должно быть внутри
- Контент: label (или без него), иконка галочки, helper text, error message
- Контейнер: фон, бордер, радиус, внутренние отступы, клик-зона, размеры s / m / l
- Поведение: состояния, выбран или невыбран, ответ системы
Если в макете просто квадрат с галочкой – это не компонент, а декор
Состояния, про которые чаще всего забывают
- default (unchecked) – пустой квадрат с label или без
- hover – легкий акцент через бордер, тень или фон, чтобы показать кликабельность
- focus – явное состояние с усиленным бордером
- default (checked) – квадрат с галочкой
- disabled – выглядит недоступным к выбору
- indeterminate – квадрат с тире, промежуточное состояние для групп
- error – бордер ошибки плюс хелпер-текст
Размеры: small для плотных списков, medium как стандарт, large для мобильных форм
Когда чекбокс не подходит
- одиночный выбор из взаимоисключающих вариантов – тут radio, он не дает выбрать несколько
- вкл и выкл настройки на мобилке – тут switch, он нагляднее показывает текущее состояние
- список из десяти и больше опций – тут select с множественным выбором, иначе экран перегружен и его невозможно сканировать
→ Radio Group (радиогруппа)
Радиогруппа позволяет юзеру выбрать один вариант из списка. Круг и точка по центру – визуально она специально не похожа на чекбокс, и это не эстетика, а сигнал: тут можно только одно
Анатомия та же логика, что у чекбокса: контейнер с клик-зоной, индикатор, label, helper text. Отличие в том, что компонент собирается парой – отдельная кнопка и группа, которая держит их вместе и отвечает за то, что выбран ровно один вариант
Состояния: default (unselected), hover, focus, default (selected), disabled, error на всю группу, а не на отдельную кнопку
Когда брать
- юзеру нужно увидеть все доступные варианты сразу, и их не больше пяти
- варианты взаимоисключающие
- если вариантов больше и их можно свернуть – ставь select, он занимает меньше места
Частая ошибка
Оставить группу без выбранного варианта по умолчанию. Обычно предвыбирают самый частый, чтобы юзер мог просто пролистать дальше
→ Switch (переключатель)
Не просто переключашка, чтобы пощелкать туда-сюда. Кажется, что он рисуется за минуту: круг по дорожке и готово. В реальном ките – это компонент с анатомией, состояниями и четкими правилами
Что должно быть внутри
- track (дорожка) – фоновая область как направляющая для движения ручки. Цвет дорожки и есть индикатор состояния: серый для off, акцентный для on
- knob (ручка) – подвижная часть, которую тянут или тапают для переключения
- icon / label – визуальное пояснение, что вообще произойдет
Если в макете просто ползунок без контекста – это не компонент, а шляпа декор
Состояния: on / off, default, hovered, focused, disabled
Размеры: small для плотных списков настроек, medium как стандарт, large для мобильных форм
Когда switch не подходит
- одиночный выбор из нескольких вариантов – тут radio
- множественный выбор – тут checkbox, а switch только для вкл и выкл
- сложная логика, где вариантов больше двух и нужна дополнительная информация – тут select
Частая ошибка
Switch, который применяется не сразу, а по кнопке «Сохранить». Юзер ждет мгновенного эффекта, так что либо применяй сразу, либо бери чекбокс
→ Что общего у всех полей формы?
Если смотреть на пять элементов сразу, видно один набор правил
- одна анатомия – контейнер с клик-зоной, контент, label, helper text. Меняется индикатор выбора, а каркас у всех один
- один набор состояний – default, hover, focus, disabled, error. Дальше добавляются свои: checked у чекбокса, opened у селекта, indeterminate для групп
- ошибка живет на уровне поля, а не формы – красная плашка сверху с текстом «проверьте данные» не говорит юзеру ничего. Ошибка должна стоять у того поля, где она случилась, и объяснять, что не так
- выбор элемента диктует логика выбора, а не внешний вид – один из многих – radio или select. Несколько независимых – checkbox. Вкл и выкл – switch. Свободный ввод – text field
Форма перестает раздражать не тогда, когда ее красиво нарисовали, а когда каждое поле честно отвечает на действие и понятно говорит об ошибке. Собери эти пять элементов один раз как компоненты с вариантами на токенах – и любая следующая форма будет собираться из готового, а не рисоваться заново
Соседние статьи серии: кнопки и действия в интерфейсе и общий список – список элементов интерфейса UI Kit, а про переменные я писала в что такое токены в дизайне
На модуле 2. UI Kit я подробно разбираю сборку элементов и их использование в интерфейсе
26.08.2026
от хаоса к системе
если не можешь выбрать модуль, пройди короткий тест