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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текст выравнивается по левому краю. По правому краю — иконка стрелки из библиотеки интерфейсных иконок.

Выпадающий блок раскрытого списка имеет тень.

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

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

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

Пункты списка можно дополнять пояснениями — серым текстом. 

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

Состояния:

Список раскрывается на всю ширину экрана с отступами 24px от левого и правого края, и 40px от верхнего.

Вверху списка всегда располагается заголовок.

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

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

Если список длинный, и не входит в видимую часть экрана — то он скроллится до крайнего положения с отступом в 80px от нижней части.

При наличии поля поиска, раскрытие списка автоматически ставит фокус в это поле.

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