Inputs

Общая информация

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

Анатомия

Label. Заголовок формы
Placeholder. Плейсхолдер
Description (optional). Текст пояснения / подсказки
Counter (optional). Счетчик кол-ва введённых данных
Right Icon set. Иконки справа (управляющий элемент)
Left Icon. Иконки слева (поясняющие иконки)
Input text. Введенные / выбранные данные
Indicator. Индикатор

Заголовок (Label)

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

Для вида Outer возможно использование без заголовка в случаях:

Когда контекст очевиден (например, поле поиска)
Когда Label размещается слева от формы.

Плейсхолдер (Placeholder)

Плейсхолдер (от английского placeholder) — «местозаполнитель». Используйте плейсхолдер, чтобы подсказать пользователю формат вводимых данных. Плейсхолдер не должен подсказывать конкретное значение, которое нужно ввести в поле. Также не рекомендуется использовать плейсхолдер для указания формата структурированных значений, для этого есть поле с маской. В инпутах, с заголовком внутри (inner), плейсхолдер становится виден при клике в поле, а в полях, с заголовком снаружи, виден сразу. Для вида Inner плейсхолдер появляется при клике в поле, при вводе первого символа исчезает. Для вида Outer плейсхолдер виден всегда, до ввода первого символа.

Если вы предполагаете значение (как правило, наиболее часто используемое значение или значение по умолчанию) — то рекомендуется предзаполнить поле, пользователь сможет его отредактировать:

Маска

Для указания формата структурированных значений рекомендуется использовать маску.  Маски ввода помогают пользователю определить формат вводимых данных, тем самым - избежать ошибок. Маска ввода появляется в состоянии Active.

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

Контент

Контент полей ввода может быть трёх типов: текст, число или чипс. В большинстве случаев текст вводится с клавиатуры, допускается обрезать до одного символа и трёх точек в случае нехватки места. Чипсы, преимущественно, выбираются из выпадающего списка. В отдельных случаях, может быть и создание чипсов/хештегов (Пример:Outlook с почтовыми ящиками в поле «отправить»).

Элементы управления

Элементы управления всегда располагаются в правой части инпута. Клик на них вызывает действие. Также у каждого поля существует основное действие, которое вызывается кликом в само поле, а не только в управляющий элемент. Например: В dropdown при клике в поле срабатывает выпадающее меню. В качестве элементов управления в полях ввода используются кнопки-иконки. От обычных кнопок они отличаются совпадением состояний Active и Hover. У каждой кнопки-иконки есть область клика. Ширина у неё всегда 40 пикселей, высота зависит от высоты поля. Подход непропорционального уменьшения зоны клика позволяет дать пользователю большую площадь для взаимодействия с элементом, что напрямую влияет на удобство.

Поведение кнопок-иконок

При наведении и клике кнопка-иконка меняет цвет.

Частным случаем управляющего элемента является иконка очистки поля. Если пользователю нужно часто очищать поле и вводить новое значение — используйте для этого специальную иконку очистки:

Она появляется, когда в поле введен хотя бы 1 символ в состоянии Hover и Active. Исчезает, когда фокус находится вне поля. При клике на крестик фокус переходит в поле, введенное значение стирается, иконка удаления исчезает:

Поясняющие иконки

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

Звёздочка (Asterisk)

Обязательные для заполнения поля ввода отмечаются символом «*», выводимым через пробел справа от названия поля.

Дескрипшн (Description, helper text)

Дескрипш - это вспомогательный текст под полем ввода. Используйте вспомогательный текст для поля ввода, когда требуется предоставить дополнительную информацию, которая поможет пользователю его заполнить, либо в случае ошибки. Вспомогательное описание не скрывается при вводе данных. Это необходимо учитывать в случаях, когда пользователь должен видеть подсказку при вводе. Его не следует использовать, если для подсказки достаточно плейсхолдера. Может использоваться вместе с каунтером. Такой способ наиболее эффективен в плане скорости сообщения пользователю, но “съедает” пространство, которое мы закладываем под подсказку.

Место под подсказку должно быть заложено на этапе проектирования - не допустимо смещение контента под вывод сообщения.

Каунтер (Counter)

Показывает количество введенных символов и максимально допустимое количество символов для ввода в этом поле.Используйте счетчик, когда необходимо показать пользователю ограничение по количеству введенных символов. Если ограничение по количеству символов не установлено или его отображение пользователю не требуется, не используйте его. Может использоваться вместе с дискрипшеном.

Индикация (Indicator)

Если нужно дать пользователю описание, а места для дескрипшена нет, то предлагается использовать индикатор в поле ввода. При наведении на иконку статуса появляется всплывающее сообщение (hint) об ошибке / рекомендациях по исправлению.

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

Виды

С целью поддержания 2 паттернов пользовательского опыта в существующих системах, все формы ввода имеют 2 вида: Inner input — формы ввода с заголовком (label) внутри Outer input — формы ввода с заголовком (label) снаружи

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

Размеры

Внешние размеры

Ширина инпутов зависит от задачи, разрешения монитора и требований, высота является постоянным значением и зависит от размера выбранного инпута. Размерный ряд инпутов зависит от вида. В Inner используется: L и M, а в Outer — L, M и S. Их высота не совпадает между собой в разных видах:

Для вида Inner высота L — 44 px используется по умолчанию, а при необходимости (например нехватке места в панелях и шапках виджетов) используется M — 36 px. Для вида Outer основной высотой является M — 32 px. При нехватке места на экране используется S — 24 px. В отдельных случаях используют высоту L — 40 px. При выборе ширины поля в макете, рекомендуется учитывать максимально возможный контент для заполнения поля.

Исключение

Так же в нашей ДС встречаются инпуты, имеющие нестандартную высоту, максимальный размер которой зависит от вида инпута. Инпуты Multiselect и Chips в виде Inner имеют не меняющуюся и максимальную высоту - 72px.

Правила использования размеров

L -- используется в контентной области виджета M & S -- в панели

Типы

Существует 18 типов полей. Они различаются по применению. Тип поля следует выбирать в зависимости от задачи.

Состояния

Существует 4 основных состояния полей ввода:

Default — по умолчанию (состояние покоя). Когда пользователь не взаимодействует с полем
Hover — при наведении курсора
Active — в момент клика мышкой в поле
Disable — неактивное (недоступное для изменения или заполнения). Также в этом состоянии отсутствуют элементы управления

Фокус (Focus)

Так же существует состояние Focus. Он появляется в момент выбора поля ввода с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с состоянием Default и Hover. Невозможен в состоянии Disabled.

Взаимодействие с клавиатуры

Рамка фокуса появляется при переходе клавишей Tab, если фокус стоял на другом. Если поля ввода располагаются вертикально, переключение фокуса производится клавишами ↓ ↑, если горизонтально — клавишами ← →. При нажатии клавиши Enter, появляется курсор для ввода текста, на котором находится фокус.

Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.