Forms · Selection

SelectField

Элемент для выбора одного варианта из заранее заданного списка. Используется в формах, фильтрах и настройках, когда нужно ограничить пользователя конкретным набором опций — в отличие от текстового поля, не позволяет вводить произвольные данные. При клике раскрывает выпадающий список; при включённом поиске фильтрует варианты вводом текста. Два варианта: LabelOut (внешний label, SM–XL) и LabelIn (плавающий label, MD–LG). Нативный <select> с appearance:none — полная токенизация через --ds-input-* и --ds-field-in-*.

LabelOut — States

MD · 40px · radius 10px · chevron 20px
Default
Filled
Error
Обязательное поле
Error Filled
Недопустимый выбор
Disabled
Disabled Filled
ReadOnly
Required
Обязательно для заполнения

LabelOut — Sizes

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

LabelIn — States

MD 48px · radius 12px · chevron 24px · floating label
Default
Filled
Error
Обязательное поле
Error Filled
Недопустимый выбор
Disabled
Disabled Filled
ReadOnly
Required

LabelIn — Sizes

MD 48px · LG 56px

API — Props

SelectFieldProps
Prop
Type
Default
Description
labelVariant
'out' | 'in'
'out'
Внешний label или floating.
size
'sm' | 'md' | 'lg' | 'xl'
'md'
Размер. LabelIn: SM→MD, XL→LG.
validation
'none' | 'error'
'none'
Состояние валидации.
options *
SelectOption[]
—
{ value, label, disabled? } — список пунктов.
label
string
—
Текст внешнего или плавающего label.
placeholder
string
'Выберите...'
Текст placeholder-опции (LabelOut only).
value
string
—
Controlled value.
onChange
(e) => void
—
Обработчик изменения выбора.
disabled
boolean
false
Поле недоступно.
readOnly
boolean
false
Только для чтения.
helperText
string
—
Подпись под полем.

Доступность

WCAG 2.2 AA · APCA · ARIA · Keyboard
ARIA

Разметка

  • Роль combobox или listbox для поля выбора
  • aria-expanded указывает, раскрыт ли список
  • aria-labelledby связывает поле с лейблом
  • aria-describedby связывает с текстом подсказки или ошибки
  • aria-required отмечает обязательные поля; aria-invalid сигнализирует об ошибке валидации
Клавиатура

Навигация

  • Tab / Shift+Tab — переход фокуса на поле и обратно
  • Enter / Space — открыть список; повторный Enter подтверждает выбор
  • ↑ / ↓ — навигация по вариантам внутри списка
  • Home / End — к первому или последнему варианту
  • Escape — закрыть список без выбора; ввод текста — поиск (если поддерживается)
WCAG 2.2 AA · APCA

Контраст и размер

  • Чёткая визуальная индикация фокуса (обводка, изменение цвета)
  • Контраст между состояниями достаточен для пользователей с нарушениями зрения
  • Touch target: на мобильных применять MD / LG / XL — область касания минимум 44×44 px
  • Состояние ошибки обозначается не только цветом — обводкой и текстом под полем
  • Размер SM на мобильных не применяется
Focus Ring

Фокус

  • Outline 2px, цвет --ds-info-800 (#5475F8)
  • Offset 1px — виден на любом фоне
  • При фокусе обводка поля становится акцентной, шеврон поворачивается
  • Виден при навигации с клавиатуры (:focus-visible)
  • Скрывается при выборе мышью — не мешает визуально

Работа с клавиатурой

Tab · Enter / Space · ↑ ↓ · Esc
Клавиша
Действие
Tab
Переход фокуса на компонент. Shift+Tab возвращает фокус на предыдущий элемент. Компонент должен находиться в логическом порядке табуляции.
Enter Space
Открывает выпадающий список, если компонент в фокусе. Повторное нажатие Enter подтверждает выбор и закрывает список.
↑ ↓
Навигация по вариантам внутри раскрытого списка. Первое нажатие ↓ при закрытом списке открывает его и фокусируется на первом варианте.
Home End
Быстрая навигация к первому или последнему варианту. Упрощает работу с длинными списками.
Esc
Закрывает выпадающий список без выбора. Фокус возвращается на поле.
A–Я
Если компонент поддерживает поиск, набор символов фильтрует список в реальном времени. Фокус автоматически перемещается на первый подходящий вариант.

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

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

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

  • Выбор одного варианта из заранее заданного списка опций
  • Формы регистрации и профиля — страна, город, язык интерфейса (исключает опечатки)
  • Фильтры и сортировка в каталогах, списках, таблицах
  • Настройки — тема оформления, часовой пояс, единицы измерения
  • Дашборды и аналитика — переключение периодов отчётности, выбор метрик
  • Оптимально 5–6 пунктов в списке; при 6 и более — обязателен скроллбар
Чего избегать

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

  • Выбор из двух-трёх вариантов — используйте радиокнопки или переключатели (не нужен лишний клик)
  • Данные, которые пользователь может захотеть ввести сам (например, название компании) — используйте текстовое поле
  • Длинные списки без поиска и группировки — затрудняют навигацию и увеличивают когнитивную нагрузку
  • Множественный выбор — используйте Multiselect
2–3 видимых варианта → Radio
Если вариантов мало и их можно показать сразу, раскрывающийся список лишний — переключитесь на радиокнопки.
State Explorer
Light
Dark