Комбобокс ComboBox

Комбобокс — это поле ввода со списком подсказок.

Комбобокс используют:

• для выбора значения из справочника,
• для добавления своего значения в справочник.

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

Комбобокс может работать в двух режимах — обычном и в режиме автокомплита.

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

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

Когда курсор находится на списке, скроллинг страницы блокируется.

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

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

При выборе значения мышью или клавишей Enter список закрывается, фокус остается в поле. Список будет показан снова при следующем клике в поле или изменении значения.

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

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

В этом состоянии, при нажатии на клавиатуре Enter ничего не происходит, фокус остается в поле.

Если введенное значение совпадает со значением из справочника, при потере фокуса это значение выбирается.

Если ничего не нашлось, покажите ошибку.

Если список не успел загрузиться, тоже покажите ошибку.

Комбобокс в режиме автокомплита т.е комбобокс без стрелки, работает так же, как со стрелкой, но с некоторыми исключениями.

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

Оптимальное количество строк в списке — 5. Если после фильтрации список может быть очень большим, это число можно увеличивать до 20.

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

Основное значение — короткое, ёмкое и уникальное.

После того как выбор сделан, показывайте дополнительное значение в поле серым цветом.

Если оно полностью не входит, показывайте при наведении хинт.

При фокусе тултип должен исчезнуть.

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

Если слово начинается с кавычек, они не должны учитываться при поиске совпадения.

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

Подсвечивайте совпадения жирным начертанием.

Если это уместно, предлагайте пользователю наиболее вероятные варианты еще до начала ввода. Например, определение города по геопозиции или ip.

Эти варианты показываются над основным списком, отделяются чертой.

Если это комбобокс в режиме автокомплита сразу по фокусу показывайте список из 3-5 вариантов с заголовком. Заголовок нужен для того, чтобы было понятно, что это не полный список.

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

Если пользователь сам наполняет справочник, то при вводе нового значения не показывайте текст «Нет совпадений». Добавляйте значение в список и при следующем заполнении предлагайте его наравне с остальными.

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

По клику на него может открываться модальное окно, сайдпейдж, или отдельная страница. Поле «Название» должно быть заполнено введённым пользователем в комбобокс текстом.

Прежде чем добавлять новую карточку, пользователь, скорее всего, захочет проверить, что такой ещё нет в списке. Он начнёт набирать текст в комбобоксе и если не будет совпадений — последний пункт «Добавить» подсветится автоматически.

Дублируйте введенные символы в пункт «Добавить».

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

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

Если обработка запроса для построения списка занимает дольше 0,3 секунды, показываем спиннер минимум 1 секунду.

Лоадер серый, не привлекающий слишком много внимания.

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

Если происходит ошибка сервера, показываем сообщение.

Нажатие Enter при пустом/не загрузившемся списке ни к чему не приводит, фокус остается в этом же поле.

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

Смотрите гайд Поле ввода.

Список с подсказками открывается вниз. Оптимальная высота списка 300-450 px. Чтобы список не выходил за границу страницы, проследите чтобы под ним было достаточное количество места.

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

Работа с клавиатурой

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

Если к полю прикреплено сообщение об ошибке, то при фокусе список не появляется сразу же. Чтобы увидеть список нужно отредактировать значение.

О поведении полей ввода с ошибками читайте в гайде по валидации.

Внешне поле ничем не отличается от обычного поля ввода. Справа иконка стрелочки   — из библиотеки Kontur Icons.

Стиль выпадающего списка совпадает с раскрывающимся списком.

Ширина списка должна быть не меньше ширины поля. Красиво, когда список шире поля ввода на 30−40 px.

Неправильно

Правильно