Поле ввода Input

Поле ввода позволяет ввести значение с клавиатуры.

Используйте поле ввода для коротких текстовых или цифровых значений без предсказуемого формата.

Если вводимое значение имеет определенный формат, используйте специальную версию поля:

• Поле с маской
• Поле с паролем
• Поле с валютой
• Поле с телефоном

В HTML поле ввода по умолчанию может быть разных типов — color, date, email, password, text, url и т.д. В сервисах Контура допустимо использовать только типы text и password, для остальных используйте контролы из нашей библиотеки. Потому что остальные типы из документации HTML либо не поддерживаются основными браузерами, либо предлагают внешний вид, поведение и валидации, который будут сильно отличаться от нашего дизайна.

Название поля пишется с заглавной буквы.

Называйте поле ввода существительным, которое указывает что нужно ввести. Избегайте в названии слов «ваш», «введите» и подобных — они не несут смысла.

Неправильно

Правильно

Не ставьте двоеточие после названия — оно создает лишний визуальный шум. Без него будет понятно.

Неправильно

Правильно

Описание работы

Плейсхолдер

Если из названия неочевидно, как заполнять поле, используйте плейсхолдер – подсказку, которая отображается внутри поля, пока оно не заполнено.

Плейсхолдер (от английского placeholder) — местозаполнитель. Часто используют синоним «ватермарк», но плейсхолдер — более правильное название, т. к. совпадает с соответствующим атрибутом тегов Input и Textarea.

По фокусу плейсхолдер становится светлее, а при вводе первого символа исчезает.

Не пишите в плейсхолдере конкретное значение, которое нужно ввести в поле. Лучше предзаполните его. Если ошибётесь, пользователь исправит.

Неправильно

Правильно

Не используйте плейсхолдер для указания формата и ограничений. Используйте поле с маской.

Неправильно

Правильно

Не используйте плейсхолдер для названия. В заполненном состоянии такая форма становится «слепой» — легко забыть какое поле ты заполняешь.

Неправильно

Правильно

Исключение — когда нужно сэкономить место или указать на конкретное поле из группы полей.

Неправильно

Правильно

Если поле вычисляемое и вы рассчитали значение — используйте автополе.

Если пользователю нужно часто очищать поле и вводить новое значение — используйте кнопку-крестик для очистки. По умолчанию, крестика в поле нет.

Если справа есть иконка, то крестик заменит её.

Крестик показывается, когда введён хотя бы 1 символ и пропадает, когда поле пустое.

Когда на странице много полей с крестиками, показывайте их и по ховеру, и по фокусу. Чтобы не создавалось визуального шума.

Неправильно

Правильно

А когда поле одно, показывайте крестик всегда. Так пользователю будет удобнее целиться.

При клике на крестик фокус переходит в поле, введенное значение стирается.

При наведении иконка становится темнее.

Область нажатия по высоте равна полю ввода.

Счётчик введенных символов в обычном инпуте работает так же, как и в многострочном поле. Располагается справа, на той же строке, что и вводимый текст:

Смотрите гайд Многострочное поле.

Поле ввода, как и кнопка, может быть трех размеров — S, M, L.

Используйте размер M и L, когда это главные контролы на странице. Например, поле поиска в справочнике.

Название поля выравнивается по базовой линии текста в поле.

Название поля в несколько строк выравнивается по базовой линии введёного текста в поле.

В многострочном поле название выравнивается по базовой линии первой строки введенного в поле текста.

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

Неправильно

Правильно

Неправильно

Правильно

В рамках одной формы выберите не больше четырёх ширин для полей. Так форма выглядит проще и аккуратнее.

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

Чёрная рамка фокуса не появляется, если поле находится в состоянии ошибки или предупреждения, до тех пор пока значение в поле не будет изменено.

Допустимо переносить фокус на следующее поле не только при нажатии на Tab, но и на Enter . С полями такое поведение удобно и интуитивно понятно для пользователя.

Если поле последнее в форме, переход фокуса по Enter не происходит.

Поле с ошибкой подсвечивается красной рамкой.

Смотрите гайд Валидации.

Радиус скругления углов 2 px. Рамка поля чёрного цвета с непрозрачностью 16 % — так поле контрастно выглядит на серых и цветных фонах.