Перейти к содержимому
v3.0.0
English
Русский
Документация

Listbox

Listbox — всегда видимый список, в котором выбирают один или несколько вариантов, как в нативном select с size.

Именование

  • Назовите список через aria-labelledby или aria-label. Компонент сам имя не добавляет.
  • Так же называйте ListboxGroup.

Поведение клавиатуры

ОбъявлениеПереведите фокус на демо и нажмите клавишу из таблицы.
КлавишаДействие
TabПереносит фокус на список, и активным становится выбранный вариант или первый доступный. Список — одна остановка табуляции.
↓↑Делает активным следующий или предыдущий доступный вариант, пропуская отключённые и останавливаясь на краях. Фокус остаётся на списке.
HomeEndДелает активным первый или последний доступный вариант.
Page DownPage UpПереносит активный вариант на 10 вариантов вниз или вверх, останавливаясь на последнем или первом доступном.
pПоиск при наборе: печатный символ делает активным следующий вариант, чья подпись начинается с набранного текста; быстро набранные символы складываются. Отключается через typeahead={false}.
EnterSpaceВыбирает активный вариант. С multiple переключает его, сохраняя остальные выбранные варианты.
Каждая строка проверена в настоящем браузере: Playwright нажимает клавишу в Chromium и смотрит, где оказались фокус и активный элемент.

Поведение фокуса

  • Список — одна остановка табуляции. При фокусе активным становится выбранный вариант или первый доступный.
  • Фокус остаётся на списке, варианты его не получают.

Семантика для скринридеров

  • Список рендерит role='listbox' и aria-activedescendant, а с multiple — ещё и aria-multiselectable.
  • Варианты рендерят role='option' с aria-selected, а недоступные — с aria-disabled.
  • Группы рендерят role='group'.

Семантика формы

  • Listbox не отправляет значение в форме. Храните значение в состоянии и отправляйте его сами или используйте Select с SelectHiddenSelect.

Риски доступности

  • список или группа без имени
  • интерактивные элементы внутри варианта
  • опора на aria-activedescendant без проверки в поддерживаемых вами скринридерах