Комбобокс ComboBox
Комбобокс — это поле ввода со списком подсказок.
Когда использовать
Комбобокс используют:
- для выбора значения из справочника,
- для добавления своего значения в справочник.
Используйте комбобокс, если значений в справочнике слишком много, чтобы искать их глазами. Если значений не больше 25, можно использовать раскрывающийся список или группу радиокнопок.
Комбобокс может работать в двух режимах — обычном и в режиме автокомплита. Основное их отличие в том, что в режиме автокомплита список вариантов появляется только после ввода первого символа или изменении уже введенного значения.
Виды полей
Поле работает по аналогии с раскрывающимся списком — при клике в поле сразу появляется список всех вариантов. Об этом подсказывает стрелка и плейсхолдер. Используйте этот режим, если вы точно знаете, что справочник не будет содержать больше 50 строк, либо уверены, что пользователю удобней выбирать значение, просматривая список. |
Список вариантов появляется только после ввода первого символа. Поэтому в поле нет стрелки, а плейсхолдер подсказывает, что достаточно ввести первые буквы. Используйте это поле, если в справочнике больше 50 строк или пользователь привык заполнять подобные поля, вводя значение с клавиатуры. |
Описание работы
Комбобокс со стрелкой
Состояние по умолчанию
Плейсхолдер подсказывает, что в поле можно ввести свое значение или выбрать его из списка вручную:
![](img/autocomplete-arr-default.png)
Фокус по пустому полю
При получении фокуса плейсхолдер становится чуть светлее, открывается список вариантов.
Когда курсор находится над списком, скроллинг страницы блокируется.
![](img/autocomplete-04.png)
Начало ввода
При вводе первого символа список фильтруется. Первый пункт в списке подсвечивается:
![](img/autocomplete-06.png)
Выбор пункта из списка
Выбор значения может быть сделан двумя способами — при управлении с клавиатуры и мышью.
При выборе значения мышью или клавишей Enter список закрывается, фокус остается в поле. Список будет показан снова при следующем клике в поле или изменении значения.
![](img/autocomplete-14.1.png)
Фокус по заполненному полю
При получении фокуса введенное значение выделяется, раскрывается список, прокрученный до выбранного значения:
![](img/autocomplete-16.png)
Нет совпадений
Если в справочнике не найдено совпадений с введенным значением, комбобокс показывает соответствующий текст. Важно показать подсказку, чтобы пользователь понял, что поле обработало его запрос.
![](img/autocomplete-10.png)
В этом состоянии, при нажатии на клавиатуре Enter ничего не происходит, фокус остается в поле.
Потеря фокуса без выбора пункта из списка
Если введенное значение совпадает со значением из справочника, при потере фокуса это значение выбирается:
![](img/autocomplete-onblur-oneresult.png)
Если ничего не найдено или список не успел загрузиться, покажите ошибку:
![](img/autocomplete-onblur-noresult.png)
![](img/autocomplete-onblur-loading.png)
Комбобокс без стрелки
В целом комбобокс без стрелки работает так же как со стрелкой с некоторыми исключениями.
Список вариантов появляется только после ввода первого символа. Поэтому в поле нет стрелки, а плейсхолдер подсказывает, что достаточно ввести первые буквы:
![](img/autocomplete-03-spacing.png)
Чтобы заполнить такое поле, пользователь должен помнить первые буквы нужного значения, по которым комбобокс найдет подходящие варианты.
При клике или получению фокуса плейсхолдер в поле становится чуть светлее.
![](img/autocomplete-05.png)
Поиск запускается и появляется список при вводе хотя бы одного символа.
![](img/autocomplete-07.png)
Оптимальное количество строк в списке — 5. Если после фильтрации список может быть очень большим, это число можно увеличивать до 20.
При получении фокуса полем с уже введенным значением это значение выделяется:
![](img/autocomplete-17.png)
Поиск запускается и список появляется только после изменения значения.
Варианты использования
Составной список
Если у каждой записи справочника есть несколько параметров, показывайте в списке самые важные. По ним должен работать поиск.
Основное значение — короткое, емкое и уникальное.
Начало ввода
Выбор сделан
После выбора показывайте дополнительное значение в поле серым цветом. Если оно полностью не входит, показывайте при наведении хинт:
Фокус по заполненному полю
При получении фокуса тултип должен исчезнуть.
Поиск по вхождению
Если строка состоит из нескольких слов, то поиск совпадения может работать не только по началу строки, но и по началу каждого слова. Если слово начинается с кавычек, они не должны учитываться при поиске совпадения.
Чтобы понять, стоит ли использовать поиск по вхождению, задайте себе вопрос: точно ли пользователь знает начало строки? Если нет — используйте поиск по вхождению.
Подсвечивайте совпадения жирным начертанием Lab Grotesque K Bold.
![](img/autocomplete-30.png)
Избранные варианты
Если это уместно, предлагайте пользователю наиболее вероятные варианты еще до начала ввода.
Фокус по пустому полю
Эти варианты показываются над основным списком, отделяются чертой.
![](img/autocomplete-20.png)
Если это комбобокс в режиме автокомплита сразу по фокусу показывайте список из 3-5 вариантов с заголовком. Заголовок нужен для того, чтобы было понятно, что это не полный список:
![](img/autocomplete-21.png)
Указание значения не из справочника
Если справочник может быть неактуальным, дайте пользователю возможность указать свое значение. При этом значение пользователя не добавляется в справочник, а на странице выводится предупреждение, чтобы обратить внимание пользователя на возможную ошибку.
Автоматическое добавление значения в справочник
Если пользователь сам наполняет справочник, то при вводе нового значения не показывайте текст «Нет совпадений». Добавляйте значение в список и при следующем заполнении предлагайте его наравне с остальными.
Нет соответствий
Фокус потерян без выбора из справочника
Добавление карточки в справочник
Если пользователь сам наполняет справочник, а каждая запись имеет дополнительный набор полей, показывайте пункт «Добавить» внизу списка, чтобы пользователь мог быстро перейти к добавлению новой карточки:
По клику на него может открываться модальное окно, сайдпейдж, или отдельная страница.
Прежде чем добавлять новую карточку, пользователь, скорее всего, захочет проверить, что такой ещё нет в списке. Он начнёт набирать текст в комбобоксе и если не будет совпадений — последний пункт «+ Добавить» подсветится автоматически.
Ввод первого символа
Дублируйте введенные символы в пункт «Добавить».
Нет совпадений
В открывающемся модальном окне добавления карточки поле «Название» должно быть заполнено введённым пользователем в комбобокс текстом.
Потеря фокуса
Если в предыдущем состоянии поле теряет фокус, срабатывает валидация: поле красится в красный, показывается сообщение об ошибке.
Спиннер
Если обработка запроса для построения списка занимает дольше 0,3 секунды, показываем спиннер минимум 1 секунду. Если список уже открыт, и при получении ответа возникла задержка — показываем спиннер в поле справа, список до обновления остается в прежнем состоянии.
Нажатие Enter при пустом/не загрузившемся списке ни к чему не приводит, фокус остается в этом же поле.
Лоадер специальный, серый, не привлекающий слишком много внимания:
![](img/autocomplete-111.png)
Если происходит ошибка сервера, показываем сообщение:
![](img/autocomplete-112.png)
Размер, расположение
Поле ввода комбобокса, как и кнопка, может быть трех размеров. Подробнее смотри в гайде поля ввода.
Список с подсказками всегда открывается вниз. Оптимальная высота списка 300-450 px. Чтобы список не выходил за границу страницы, проследите чтобы под ним было достаточное количество места.
Фокус и работа с клавиатурой
При клике по полю и при переходе табом поле выглядит одинаково: появляется чёрная рамка, которая сохраняется до потери фокуса.
Работа с клавиатурой
Tab |
Переход к следующему контролу. |
↓ ↑ |
Если открыт список вариантов из нескольких значений — переключение между строками. Переход между строками не цикличен — с последней строки фокус не переходит на первую, как и с первой на последнюю. Если список cкрыт, содержит только один вариант, сообщение об ошибке или о том, что нет совпадений — перенос текстового курсора в начало или конец строки (стандартное поведение для текстового поля). |
← → |
Перемещение текстового курсора в поле ввода. |
Esc |
Скрывает список, фокус не исчезает. Список появится вновь при вводе или удалении символа. |
Space |
Ввод пробела. |
Enter |
Выбор подсвеченного значения из списка и переход к следующему полю в форме. Если список пуст/не успел догрузиться, нажатие Enter ни к чему не приводит. |
Валидация
Поле с ошибкой подсвечивается красной рамкой.
Примеры ошибок и предупреждений в комбобоксе описаны в пунктах: 28, 51, 60.
Если к полю прикреплено сообщение об ошибке, то при получении фокуса список не появляется сразу же. Чтобы увидеть список нужно отредактировать значение:
![](img/autocomplete-validation-focus.png)
О поведении полей ввода с ошибками читайте в гайде по валидации.
Дизайн
Внешне поле ничем не отличается от обычного поля ввода. Если поле с выбором, в правой части есть стрелочка  интерфейсных иконок.
 — символ из библиотекиНазвание поля выравнивается по базовой линии текста в поле:
Стиль списка подсказок совпадает с раскрывающимся списком.
Ширина списка должна быть не меньше ширины поля. Красиво, когда список шире поля ввода на 30−40 px.
Названия пунктов показывают полностью, при необходимости переносятся на несколько строк.
Состояния:
![](img/autocomplete-state-default.png)
![](img/autocomplete-state-hover.png)
![](img/autocomplete-state-focus.png)
![](img/autocomplete-state-disabled.png)
![](img/autocomplete-state-filled.png)
![](img/autocomplete-state-error.png)
![](img/autocomplete-state-warning.png)