Выпадающий список — это элемент интерфейса, который скрывает набор опций под основным элементом управления. Данный вид списка удобен тем, что помогает экономить пространство экрана, предоставляя доступ к определенным вариантам выбора только тогда, когда это действительно необходимо. Выпадающий список используется для списков с предопределенными значениями, таких, как выбор категорий.
Базовая анатомия
Триггер включает в себя текст-описание выбора и иконку раскрытия (чаще всего стрелку, направленную вниз). Границы триггера должны быть чётко обозначены, чтобы выделить интерактивную область. Список появляется под триггером, сохраняя визуальную связь с ним через выравнивание и стилизацию.
Анатомия раскрытого состояния
В раскрытом виде элемент отображает все доступные опции, каждая из которых должна иметь достаточную область касания и отступы для удобного выбора. При необходимости они могут включать дополнительные элементы, такие как иконки или краткие описания. В случае с длинными списками стоит добавить полосу прокрутки.
Выпадающий список должен динамично реагировать на действия пользователя и предоставлять понятную обратную связь на каждом этапе взаимодействия.
Default
В обычном состоянии триггер отображает текущий выбор, либо описание выбора и индикатор раскрытия. Важно, чтобы даже в свёрнутом состоянии было понятно, что элемент интерактивный.
Hover
При наведении на триггер или опции в списке происходит то же самое, что и при наведении на кнопку. Элементы должны визуально выделяться, чтобы обозначить свою интерактивность. Обычно, в случае с выпадающим списком, используют эффект подсветки.
Active
В момент раскрытия список плавно появляется, а стрелка-индикатор меняет направление, чтобы обозначить пользователю то, что список можно свернуть. Выбранная опция обычно выделяется цветом или измененной иконкой (при наличии). Когда пользователь кликает вне области данного элемента, список должен автоматически свернуться.
Disabled
Сценарий, при котором выпадающий список неактивен, достаточно редкое явление, однако, в такой ситуации следует явно показать недоступность взаимодействия через пониженную контрастность.
