Комбобокс ComboBox

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

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

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

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

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

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

Виды полей

Поле работает по аналогии с раскрывающимся списком — при клике в поле сразу появляется список всех вариантов. Об этом подсказывает стрелка и плейсхолдер.

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

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

Используйте это поле, если в справочнике больше 50 строк или пользователь привык заполнять подобные поля, вводя значение с клавиатуры.

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

Комбобокс со стрелкой

Состояние по умолчанию

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

Фокус по пустому полю

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

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

Начало ввода

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

Выбор пункта из списка

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

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

Фокус по заполненному полю

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

Нет совпадений

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

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

Потеря фокуса без выбора пункта из списка

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

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

Комбобокс без стрелки

В целом комбобокс без стрелки работает так же как со стрелкой с некоторыми исключениями.

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

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

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

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

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

При получении фокуса полем с уже введенным значением это значение выделяется:

Поиск запускается и список появляется только после изменения значения.

Варианты использования

Составной список

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

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

Начало ввода

Выбор сделан

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

Фокус по заполненному полю

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

Поиск по вхождению

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

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

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

Избранные варианты

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

Фокус по пустому полю

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

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

Указание значения не из справочника

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

Автоматическое добавление значения в справочник

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

Нет соответствий

Фокус потерян без выбора из справочника

Добавление карточки в справочник

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

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

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

Ввод первого символа

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

Нет совпадений

В открывающемся модальном окне добавления карточки поле «Название» должно быть заполнено введённым пользователем в комбобокс текстом.

Потеря фокуса

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

Спиннер

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

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

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

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

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

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

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

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

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

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

Tab

Переход к следующему контролу.

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

Если список cкрыт, содержит только один вариант, сообщение об ошибке или о том, что нет совпадений — перенос текстового курсора в начало или конец строки (стандартное поведение для текстового поля).

Перемещение текстового курсора в поле ввода.

Esc

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

Space

Ввод пробела.

Enter

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

Валидация

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

Примеры ошибок и предупреждений в комбобоксе описаны в пунктах: 28, 51, 60.

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

Дизайн

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

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

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

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

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

Состояния: