Выпадающий список

Выпадающие списки экономят место: десятки городов, размеров или способов доставки прячутся за одной строкой. Под этим названием скрываются два разных по устройству элемента. Первый — поле выбора значения в форме, нативный select. Второй — меню навигации или действий, которое раскрывается по кнопке: в нём не выбирают значение, а переходят по ссылке или запускают команду.

Нативный select

<label for="city">Город доставки</label>
<select id="city" name="city">
  <optgroup label="Центр">
    <option value="msk">Москва</option>
    <option value="tver">Тверь</option>
  </optgroup>
  <option value="other" selected>Другой</option>
</select>

Браузер даёт всё сразу: управление стрелками, поиск по первым буквам, системный список на телефоне, отправку значения вместе с формой. Атрибут multiple превращает его в список с множественным выбором, а для подсказок при вводе есть datalist. Минус — раскрытый список почти не поддаётся оформлению. В свежих версиях браузеров на Chromium появилась возможность стилизовать его целиком через appearance: base-select, но рассчитывать на неё во всех браузерах пока нельзя.

Что повторить в самодельном списке

Когда дизайн требует картинок в пунктах, поиска или чекбоксов, список собирают из div и скриптов. Тогда всё, что select умел сам, приходится делать вручную:

• открытие по Enter и пробелу, перемещение стрелками, закрытие по Escape;
• возврат фокуса на кнопку после выбора;
• роли и состояния ARIA: aria-expanded на кнопке, role="listbox" и role="option" у списка;
• закрытие при щелчке мимо и правильную работу внутри прокручиваемого блока;
• передачу значения на сервер — обычно его пишут в скрытое поле формы.

Пропуск любого пункта бьёт по доступности интерфейса: список, который не открывается с клавиатуры, для части посетителей просто не существует. Поэтому, если макет позволяет, выгоднее оставить нативный элемент и оформить только его закрытое состояние.