Комбобокс ComboBox

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

При фокусе тултип исчезает.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Неправильно

Правильно

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

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

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

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

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

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

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