11 · Components · Forms · Stable

Combobox

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

Размеры

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

Состояния

Default · Focused · Error · Disabled · Read-only
Default — поле готово к вводу
Hover — наведение на поле (показано статично)
Required — обязательное поле
Focused / Open — поле активно (показан статично)
Введите название для фильтрации
Error — обязательное поле не заполнено
Страна регистрации не выбрана. Выберите страну из списка. (code: CTR-400)
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 поля
8px
10px
12px
Font-size поля
14px
16px
16px
Border-radius
10px
10px
10px
Dropdown max-h
240px (scroll)
240px (scroll)
240px (scroll)
Dropdown bg
--ds-surface-neutral-overlay — mirror-aware (L #fff · D #1c2023 · LI #33373b · DI #fff); border --ds-stroke-low

Тёмная тема

dropdown bg = surface-neutral-overlay · hover = nba-40
Default
Error
Страна регистрации не выбрана. Выберите страну из списка. (code: CTR-400)
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-stroke-high + box-shadow: inset 0 0 0 1px (визуально 2px без layout-shift). При ошибке — --ds-neg-border-default.

Focus — --ds-stroke-high, inset 1px (visual 2px)
Клавиша
Действие
↓ 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 для больших списков — пользователь вынужден скроллить
Вариант

Label Inside

Floating label — label анимируется вверх при фокусе или заполненном поле. Переиспользует общий механизм .field-in (как Input), chevron берёт 24px из моста LabelIn (Figma 726:6705).

Размеры

--ds-field-in-{sm,md,lg}-h · chevron 24px
MD · пустое поле
MD · заполненное
SM · пустое
LG · заполненное

Состояния

default · error · disabled
Страна регистрации не выбрана. Выберите страну из списка. (code: CTR-400)
Только для администраторов

State Explorer

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