11 · Components · Forms · Stable

Combobox

Поле ввода с выпадающим списком и поиском. Пользователь печатает — список фильтруется по метке; выбирает мышью или клавиатурой. Не является нативным <select>.

Размеры

SM · MD · LG
SM — 32px
MD — 40px
LG — 48px

Состояния

Default · Focused · Error · Disabled · Read-only
Default — поле готово к вводу
Focused / Open — поле активно (показан статично)
Введите название для фильтрации
Error — обязательное поле не заполнено
ERR-001: Укажите страну регистрации
Disabled — поле недоступно для данной роли (disabled = read-only по роли)
Только для администраторов
Read-only — значение отображается, но не редактируется
Обратитесь к администратору для изменения

Интерактивное демо

Поиск + выбор + клавиатурная навигация
Поиск по странам (ввод фильтрует список)
С clearable

Параметры размеров

Наследуются из --ds-input-* токенов
Параметр
SM — 32px
MD — 40px
LG — 48px
Токен высоты
--ds-input-sm-h
--ds-input-md-h
--ds-input-lg-h
Значение
32px
40px
48px
Padding-x поля
10px
12px
14px
Font-size поля
14px
16px
16px
Border-radius
6px
6px
8px
Dropdown max-h
240px (scroll)
240px (scroll)
240px (scroll)
Dropdown bg
Light: --ds-surface-0 · Dark: --ds-nb-950 (elevated above nb-800 page-bg)

Тёмная тема

surface-0 = nb-950 · dropdown bg = nb-950 · hover = nba-40
Default
Error
ERR-001: Укажите страну
Disabled

Клавиатура и доступность

ARIA Combobox · WAI-ARIA 1.2

ARIA-паттерн

  • Поле: role="combobox" + aria-expanded + aria-autocomplete="list"
  • Список: role="listbox" с уникальным id
  • Опция: role="option" + aria-selected + aria-disabled
  • Активная опция: aria-activedescendant на поле
  • Ошибка: aria-invalid="true" + aria-describedby на caption
  • Readonly: aria-readonly="true" на поле

Focus Ring

Кольцо фокуса: --ds-shadow-focus — 2px Info-800, offset 1px. При ошибке — кольцо Negative-default.

Focus ring — Info-800 / offset 1px
Клавиша
Действие
↓ Arrow Down
Открыть dropdown (если закрыт) / перейти к следующей доступной опции
↑ Arrow Up
Перейти к предыдущей доступной опции
Enter
Открыть dropdown (если закрыт) / выбрать активную опцию
Escape
Закрыть dropdown и восстановить предыдущее значение
Home
Перейти к первой доступной опции в списке
End
Перейти к последней доступной опции в списке
Tab
Закрыть dropdown и перейти к следующему focusable-элементу
Shift + Tab
Закрыть dropdown и перейти к предыдущему focusable-элементу

Правила использования

Когда · Чего избегать
Правила

Когда использовать Combobox

  • Большие справочники от 8+ опций: страны, валюты, банки, контрагенты
  • Пользователь знает что ищет и может набрать часть значения
  • Динамически загружаемые данные с поиском на сервере
  • Формы платежей: получатель, SWIFT-код, назначение платежа
  • Фильтрация больших таблиц по справочным значениям
Типичные ошибки

Чего избегать

  • До 5–7 опций — лучше Radio Buttons или SelectControl (весь список виден)
  • Два взаимоисключающих состояния — Switcher или Checkbox
  • Переключение контента на странице — Tabs
  • Disabled без подсказки о причине и способе получения доступа
  • Non-searchable для больших списков — пользователь вынужден скроллить

State Explorer

Интерактивный тест состояний