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

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

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

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

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

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

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

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

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

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

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

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

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

Название

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Валидация

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

Дизайн

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

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

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

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

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

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

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

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

Состояния: