Forms · Selection
SelectField
Элемент для выбора одного варианта из заранее заданного списка. Используется в формах, фильтрах и настройках, когда нужно ограничить пользователя конкретным набором опций — в отличие от текстового поля, не позволяет вводить произвольные данные. При клике раскрывает выпадающий список. Два варианта: LabelOut (внешний label, SM–XL) и LabelIn (плавающий label, MD–LG). Построен на примитиве DropdownMenu (кастомный попап, не native <select>): value-based onChange, скрытый <input> для сабмита формы по name, контракт размера поля→меню (sm/md→sm, lg/xl→md). Статические карточки ниже — визуальный референс состояний; интерактивный компонент — в State Explorer .
LabelOut — States MD · 40px · radius 10px · chevron 20px
Required
* Валюта
Обязательно для заполнения
LabelOut — Sizes SM 32px · MD 40px · LG 48px · XL 56px
LabelIn — States MD 48px · radius 12px · chevron 24px · floating label
ReadOnly
Валюта
British Pound (GBP)
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.
defaultValue
string
''
Uncontrolled начальное значение.
onChange
(value: string) => void
—
Value-based: получает выбранное значение (не DOM-событие).
name
string
—
Включает скрытый <input name value> для сабмита формы.
required
boolean
false
Обязательное поле (aria-required + звёздочка).
disabled
boolean
false
Поле недоступно.
readOnly
boolean
false
Только для чтения.
helperText
string
—
Подпись под полем (текст ошибки при validation=error).
Доступность 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 Интерактивный тест состояний (React · Light + Dark)
Label orientation = Left
gap-x 10/12/12/16 · лейбл прижат к полю (Figma primary MAX)
Валюта
Лейбл в колонке слева, caption под полем
Валюта
Top для сравнения — лейбл над полем