Раскрывающийся список Select

Раскрывающийся список позволяет выбрать значение из заранее известного набора вариантов.

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

Используйте раскрывающийся список для выбора одного значения из 5–25 вариантов:

  • при заполнении форм, например выбор месяца;
  • переключение состояний, например фильтры;
  • выбора предустановленных настроек, например частота уведомлений, часовой пояс.

Если значений в списке до 5, лучше использовать группу радиокнопок или переключатель. Если значений больше 25 — используйте комбобокс.

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

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

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

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

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

Чтобы пользователь мог отменить выбор, добавьте в список соответствующий пункт. Например, «Все», «Любой», «Неважно». Отделите такой пункт линией.

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

Название

Название кнопки и списка вариантов пишут с заглавной буквы и формулируют так, чтобы:

  • было понятно, что можно выбрать только 1 вариант;
  • названия не содержали повторяющуюся часть;
  • название кнопки не дублировалось в пунктах списка.

В названии нельзя использовать слова «Выберите», «Укажите» и т. д.

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

Ширина кнопки должна быть такой, чтобы большая часть значений из списка помещалась полностью:

Если выбранное значение не помещается, появляется многоточие:

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

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

Элементы списка расположены в один столбец в соответствии с логикой, понятной пользователю. Например: отсортированы по алфавиту, по номеру. В больших списках полезно продублировать популярные варианты в начале списка, отделив их линией. 

Список раскрывается вниз. Минимальная высота списка со скроллингом 200 px. При наличии места список стремится отобразить максимум вариантов и расширяется до высоты 450 px. Исключение — если раскрывающийся список находится на панели, закрепленной у нижней границы окна. В таком случае он открывается вверх.

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

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

Раскрывающийся список получает фокус только при переходе табом —появляется синяя рамка. При клике фокусная рамка не появляется.

В свернутом состоянии кнопки Enter и ↓ раскрывают список и перемещают синюю подсветку на первый пункт в списке.

В развернутом состоянии кнопки ↑ и ↓ перемещают синюю подсветку, а клавиша Enter выбирает подсвеченную строку. После этого фокус переходит на следующий контрол.

Валидация

Блокируйте или убирайте из списка варианты, выбор которых приведет к ошибке. Таким образом, валидация понадобится только для проверки на обязательность выбора.

Дизайн

Внешне раскрывающийся список выглядит как кнопка. Текст выравнивается по левому краю. В правой части стрелка — символ из шрифта Kontur Iconic.

После открытия списка, кнопка остается нажатой: название кнопки и стрелка смещаются вниз на 1 px, как у обычной кнопки.

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

В момент нажатия:

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

Заблокированный пункт выделяется серым цветом, при наведении курсор превращается в стрелку. 

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

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

Состояния:

Адаптивность

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

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

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

Если при фильтрации количество пунктов уменьшается, список выравнивается по верхнему краю. Само меню выбора не уменьшается, сохраняя свою высоту.

Если начать скроллить список — поле поиска теряет фокус и скрывается клавиатура.