QPEL.ai

Разработка поля ввода с состояниями и иконками

Курс: Быстрая дизайн-система для Next.js в Figma0+

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

Мы уже научились создавать кнопки с состояниями и размерами. Теперь применим те же принципы к полю ввода. Главное — не просто нарисовать, а создать гибкий, переиспользуемый компонент, который легко адаптировать под разные сценарии.

Базовая структура поля ввода

Начнём с простого: создадим контейнер с автолейаутом (Auto Layout). Это будет основа нашего компонента.

  1. Создайте фрейм и включите автолейаут (горизонтальное направление).
  2. Примените внутренние отступы через переменные, например:
    • spacing/md (16px) — для горизонтальных отступов
    • spacing/sm (8px) — для вертикальных
  3. Добавьте обводку — используйте семантический токен, например border/default, который ссылается на neutral/300.
  4. Скругление угла: radius/sm (4px).

Теперь добавьте текстовое поле:

  • Вложите текстовый слой внутрь контейнера.
  • Выровняйте по центру (вертикально и горизонтально).
  • Примените типографические переменные: text/body, font/primary, line-height/md.

Совет: не задавайте фиксированную ширину. Пусть автолейаут управляет размером — это сделает поле адаптивным.

Вложенные иконки: как и зачем

Теперь добавим иконки слева и справа. Это может быть, например, лупа в поиске или крестик для очистки.

Здесь важно понимать, что вложенная иконка — это не просто SVG-файл, а экземпляр компонента. Это позволяет:

  • Менять цвет через переменные
  • Управлять размером
  • Быстро заменять иконку в разных состояниях

Как добавить иконку:

  1. Импортируйте SVG-иконку и превратите её в компонент (например, Icon/Search, Icon/Clear).
  2. Вставьте её в левую часть поля ввода.
  3. Установите размер через переменную, например icon/md (20px).
  4. Цвет задайте через fill и переменную icon/primary.

Повторите для правой иконки.

Важно: установите для иконок режим Hug в автолейауте, а для текстового поля — Fill. Это обеспечит правильное поведение: иконки не будут растягиваться, а текст — займёт всё свободное пространство.

Состояния: от базового до интерактивного

Мы уже работали с состояниями на примере кнопок: hover, active, disabled. Теперь расширим эту логику на поле ввода.

Ключевые состояния:

СостояниеВизуальные изменения
DefaultСтандартная обводка, нет иконки справа
FocusОбводка меняет цвет, появляется тень
ErrorКрасная обводка, иконка ошибки, подсказка
SuccessЗелёная обводка, иконка успеха
DisabledСерая обводка, прозрачный текст

Состояние фокуса — особенно важно. Оно показывает пользователю, что поле активно. В Next.js-приложениях это критично для UX и доступности.

Как реализовать:

  1. Превратите фрейм в компонент.
  2. Добавьте булевы свойства:
    • hasLeftIcon
    • hasRightIcon
    • isFocused
    • hasError
    • hasSuccess
    • isDisabled
  3. Создайте варианты, комбинируя свойства.

Например:

  • Default → isFocused = false, hasError = false
  • Focus → isFocused = true
  • Error → hasError = true, hasRightIcon = true (и подставьте иконку ошибки)

Лайфхак: используйте режимы переменных (например, Light / Dark), чтобы поле корректно отображалось в обеих темах. Это особенно важно для стартапов, где важна современная визуальная подача.

Практический пример: поле поиска

Создадим конкретный кейс — поле поиска с иконками:

  1. Базовое поле с автолейаутом
  2. Левая иконка: Icon/Search, цвет icon/secondary
  3. Правая иконка: Icon/Clear, появляется только при вводе текста
  4. Состояния:
    • Focus: обводка primary/500, тень shadow/focus
    • Error: если введён невалидный запрос — обводка danger/500, иконка Icon/Error

Такой компонент можно использовать в Next.js-приложении для поиска курсов, как в вашем стартапе.

Упражнение

Создайте поле ввода электронной почты с такими требованиями:

  • Ширина — подстраивается под контейнер
  • Автолейаут — включён
  • Иконка слева: Icon/Email
  • При фокусе: обводка primary/500, тень
  • При ошибке: обводка danger/500, иконка Icon/Error, подсказка "Введите корректный email"

Проверьте, что:

  • Используются переменные для цветов, отступов, размеров
  • Иконки — вложенные компоненты
  • Состояния переключаются через варианты

Подводим итог

Мы создали гибкий компонент поля ввода, который:

  • Использует автолейаут для адаптивности
  • Применяет дизайн-токены для консистентности
  • Поддерживает вложенные иконки как переиспользуемые элементы
  • Реализует ключевые состояния, включая состояние фокуса

Теперь вы можете быстро создавать любые формы — от авторизации до настроек профиля.

Что дальше?

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

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

Готовы к следующему шагу? Это восхитительно! 💡