Поле с телефоном Input

Специальное поле, упрощающее ввод телефонного номера.

Когда использовать

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

Поле «Телефон» с серым префиксом «+7»

Для ввода номеров телефона без форматирования можно использовать обычное поле ввода.

Обычные поля «Телефон»: пустое с плейсхолдером «необязательно» и заполненное — «460-56-20 добавочный 26»

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

Поле с телефоном — это частный случай поля с маской, с двумя отличиями:

  1. В начале поля стоит префикс «+7», который подсказывает пользователю, что номер нужно ввести в полном формате. Префикс нельзя стереть.Поле «Телефон» с серым префиксом «+7», затем оно же в фокусе — префикс чёрный, за ним курсор и маска номера из 10 цифр с дефисами
  2. При вставке скопированного номера из 11 цифр первые +7 или 8 вырезаются.

Дизайн

Размер и расположение

Поле с телефоном, как и обычное поле, может быть трёх размеров. Подробнее — в гайде «Поле ввода».

Валидация

Если пользователь ввёл недостаточно цифр, при потере фокуса нужно показать валидацию.

Поле «Телефон» с красной рамкой и неполным номером «+7 460-562-0», справа тултип «Номер телефона с кодом города состоит из 11 цифр»Поле «Телефон» с красной рамкой и неполным номером «+7 460-562-0», под ним красный текст «Номер телефона с кодом города состоит из 11 цифр»

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

Доступность

Управление клавиатурой

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