Поле ввода Input

В поле можно ввести значение с клавиатуры.

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

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

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

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

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

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

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

Неправильно

Правильно

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

Неправильно

Правильно

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

Неправильно

Правильно

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

Неправильно

Правильно

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

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

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

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

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

Неправильно

Правильно

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

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

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

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

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

Подробнее — в гайде «Многострочное поле».

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

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

Неправильно

Правильно

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

Неправильно

Правильно

По умолчанию радиус скругления углов 2 px и рамка поля чёрного цвета с непрозрачностью 16 %. Такой дизайн хорошо смотрится в большинстве случаев, особенно в формах с большим количеством полей.

Есть ситуации, когда небольшая кастомизация улучшает внешний вид. Типичные примеры:

• привлечь внимание к главному сценарию,
• синхронизировать внешний вид с контролами рядом,
• компенсировать остроугольность других элементов страницы.

Неправильно

Стандартное поле с обводкой и острыми краями смотрится чужеродно в шапке рядом с навигацией

Правильно

Поле без обводки со скруглёнными краями здесь смотрится аккуратнее и лучше гармонирует с белой контентной частью

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

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

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

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

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

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

Неправильно

Правильно

Неправильно

Правильно

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

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

Подробнее — в гайде «Валидация».

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

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

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

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