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

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

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

Создать в редакторе
Парочка отдельных вариантов

Дополнительное информация по пункту
Последний уже совсем

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

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

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

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

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

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

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

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

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

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

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

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

Название

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

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

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

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

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

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

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

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

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

Список открывается вниз. Минимальная высота списка со скроллингом 200 px. При наличии места список стремится отобразить максимум вариантов и расширяется до высоты 450 px.

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

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

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

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

Валидация

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

Дизайн

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

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

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

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

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

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

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

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

Состояния: