Select

Select — выпадающий список для выбора одного или нескольких значений из предустановленного набора.

1. Key Principles of Use

When to use

Use — когда вариантов более 5 и они не помещаются на экране. Для форм выбора страны, категории, типа.

Don't use:

  • До 5 вариантов — используйте RadioBox (Single) или CheckBox (Multiple)
  • Для поиска по длинному списку — используйте Autocomplete или ComboBox

2. Anatomy

Аналогично TextField, дополнительно:

СлотОписание
triggerКнопка открытия списка (SelectButton)
dropdownВыпадающий список опций
optionОтдельная опция в списке

3. Variants

Figma Component Sets

Именование: Select/{Single|Multiple}/Select{T-shirt}

ИмяРежимT-shirt
Select/Single/Select32XSSingleXS
Select/Single/Select40SSingleS
Select/Single/Select48MSingleM
Select/Single/Select56LSingleL
Select/Single/Select64XLSingleXL
Select/Multiple/Select32XSMultipleXS
Select/Multiple/Select40SMultipleS
Select/Multiple/Select48MMultipleM
Select/Multiple/Select56LMultipleL
Select/Multiple/Select64XLMultipleXL

Отдельно: SelectButton/{Single|Multiple}/SelectButton{T-shirt} — изолированный триггер.

Режимы

РежимОписание
SingleВыбор одного значения
MultipleВыбор нескольких значений

Пропы (аналогично TextField)

ПропЗначения
LabelPlacementOuter / Inner / None (XS: только Outer/None)
ValueEmpty / Filled
OpenedTrue / False
EmptyStateTrue / False — нет результатов
DisabledTrue / False
ReadOnlyTrue / False
RequiredTrue / False (осторожно: mixed case в разных сетах)
RequiredPlacementNone / Left / Right

4. Sizes

Аналогично TextField: XS(32) · S(40) · M(48) · L(56) · XL(64).

5. States

СостояниеFigma-пропОписание
defaultValue=Empty, Opened=FalseПустое, закрытое
filledValue=FilledЕсть выбранное значение
openedOpened=TrueСписок раскрыт
empty-stateEmptyState=TrueНет подходящих вариантов
disabledDisabled=TrueНедоступен
read-onlyReadOnly=TrueТолько чтение

7. Accessibility

АтрибутЗначениеКогда
role="combobox"—На триггере
aria-expandedtrue / falseOpened=True/False
aria-haspopup="listbox"—Всегда
role="listbox"—На контейнере списка
role="option"—На каждой опции
aria-selectedtrue / falseНа опциях
Нашли расхождение документации и библиотеки — напишите команде.Сообщить о расхождении