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

В раскрывающемся списке (селекте) можно выбрать значение из заранее известного набора вариантов.

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

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

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

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

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

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

Неправильно

Правильно

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

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

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

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

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

Неправильно

Правильно

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

Неправильно

Правильно

Селект внешне похож на кнопку, но радиус скругления его углов повторяет радиус скругления поля ввода.

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

У раскрывающегося списка есть тень.

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

Список можно разделить на группы с заголовком или без. Заголовки не могут быть кликабельными.

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

Неправильно

Правильно

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

Раскрывающийся список не может быть меньше селекта по ширине.

Неправильно

Правильно

Красиво, когда список шире селекта на 24 — 40 px.

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

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

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

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

Исключение — если раскрывающийся список находится у нижней границы окна. В таком случае он открывается вверх.

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

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

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

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

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

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

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

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

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