Input
Figma
Input — текстовое поле ввода в одну строку.
Из чего состоит
  1. Поле ввода
  2. Внешний лейбл
  3. Внутренний лейбл
  4. Левая иконка
  5. Основной текст
  6. Подсказка
  7. Описание под полем
  8. Ошибка
  9. Правая иконка
Основные
Отключаемые
Редактируемые
Основные свойства
Тема (Theme)
Состояние (State)
Размер (Size)
Вид (View)
Форма (Form)
Отключаемые элементы
👁 Внешний лейбл (Outside Label)
👁 Внутренний лейбл (Inside Label)
👁 Текст (Text)
👁 Подсказка (Placeholder)
👁 Левая иконка (Left Icon)
👁 Правая иконка (Right Icon)
👁 Описание (Description)
👁 Ошибка (Error)
👁 Тег (Tag)
Редактируемые элементы
✏️ Внешний лейбл (Outside Label)
✏️ Внутренний лейбл (Inside Label)
✏️ Текст (Text)
✏️ Подсказка (Placeholder)
✏️ Левая иконка (Left Icon)
✏️ Правая иконка (Right Icon)
✏️ Описание (Description)
✏️ Ошибка (Error)
✏️ Текст тега (Tag Text)
Поле ввода и подсказка
Подсказка исчезает при нажатии на поле ввода и заполняется основным текстом.
Ошибка
Сообщение об ошибке появляется, когда нарушается валидация. Текст сообщения устанавливается для каждого нарушения. Одновременно может быть выведено несколько сообщений об ошибке. Каждое новое сообщение начинается с новой строки. Состояние инпута меняется на “State = Error”.
Минимальная ширина
Минимальная ширина Input - 296 px
По ширине контейнера
Input можно растягивать в ширину под внешний контейнер.
Много текста
Если количество текста, введенное в поле превышает его ширину, то текст скроллится по горизонтали.
Иконка крестика
Правая иконка может иметь функционал при использовании иконки «крестик». Нажатие на иконку удаляет введенный текст.
Внутренние горизонтальные отступы (View = Underline)
Можно отключать внутренние горизонтальные отступы в поле при выборе view “underline”.
Иконка «копировать»
Правая иконка может иметь функционал при использовании иконки «копировать». Нажатие на иконку копирует введенный текст. Может появляться тултип.
Маска
Поле ввода может содержать любую маску.
Добавление тегов
*В зависимости от задачи тег добавляются через Enter или пробел.
Внутренний лейбл исчезает при нажатии на инпут.
Подсказка исчезает при введении одного символа.
Подсказка и теги
При нажатии на поле, подсказка может отображаться в поле с тегами.
Сохранение тегов
При снятии фокуса поле с тегами может растягиваться или сворачиваться. При сворачивании, теги скрываются в троеточие.
Скрытые теги
Если теги сворачиваются в тег-троеточие, тогда при нажатии на него появляется тултип со скрытыми тегами.
Теги можно удалить, нажав на иконку-крестик справа.
Размеры тегов
Если поле размера L или M, тогда теги размера S.
Если поле размера S, тогда теги размера XS.