Forms · Selection

MultiSelect

Поле множественного выбора. LabelOut (внешний label, 40px) и LabelIn (плавающий label, 48px). Выбранные значения — компактные теги внутри поля (20px) или pill-чипы снаружи (24px). Переполнение — бейдж +N.

LabelOut — States

MD · 40px · radius 10px · chevron 20px · теги 20px
Default
Hover — контрол
Hover — тег
Filled — 1 tag
Filled — tags + overflow
+2
Error
Выберите хотя бы одно значение
Error Filled
Недопустимое сочетание
Required
Обязательное поле
Disabled
Disabled Filled
ReadOnly
+3

LabelOut — Chips Group & Help

Chips below · Help icon · Caption
Caption
Можно выбрать несколько классов активов
Help Icon (Left label)
Классификация по Basel III
Chips Group Below
Выбрано 5 категорий
Акции Облигации ETF Деривативы Сырьё

LabelIn — States

MD · 48px · radius 12px · chevron 24px · плавающий label
Hover
Default
IconHelp-Out
Filled — 1 tag
Filled — tags + overflow
+2
Error
Выберите хотя бы одно значение
Error Filled
Недопустимое сочетание
Disabled
Выберите...
Disabled Filled
ReadOnly
+3
Chips Group Below
Выбрано 3 категории
Акции ETF Облигации

Размеры — SM · MD · LG · XL

Figma 1180:3714 · h=32/40/48/56 · chevron 16/20/24/24 · r=10
SM · 32px
MD · 40px
LG · 48px
XL · 56px

API

LabelOut MultiSelect (.ds-ms)
Prop / AttrTypeDefaultDescription
data-disabledattr—Отключённое состояние на враппере .ds-ms.
data-readonlyattr—Read-only режим на враппере .ds-ms.
data-errorattr—Ошибка валидации на враппере .ds-ms.
data-filledattr—Наличие выбранных значений. На .ds-ms__control.
Tagcomponentoutline / neutralВыбранные значения — настоящий компонент Tag, а не своя разметка (2026-08-05). Прежний .ds-ms__tag брал токены Tag, но перерисовывал структуру и хардкодил кегль. Крестик вне tab-цепочки и гасит mousedown — через пропсы closeTabIndex и onCloseMouseDown.
.ds-ms__overflowelement—Счётчик переполнения «+N» — инстанс Tag варианта Soft (span.ds-tag, без крестика). Геометрию и цвет держит Tag md; здесь только контекстное HC-правило на выключенном поле.
.ds-ms__chipselement—Контейнер pill-чипов под полем (flex-wrap, gap 8px 6px).
.ds-ms__chipelement—Chip-MD (40px, pill) в группе снаружи поля. Figma «Chips Group» имеет MD/SM/XS = 40/32/24; код рендерит MD.
LabelIn MultiSelect (.ds-msi)
Prop / AttrTypeDefaultDescription
data-filledattr—На .ds-msi__wrapper — label всплывает вверх, теги видны.
data-errorattr—Красный box-shadow + chevron + caption; label остаётся tertiary (по Figma).
data-disabledattr—nba-15 bg, nba-border-disabled, pointer-events:none.
data-readonlyattr—surface-muted bg, cursor:default.
.ds-msi__chipselement—Контейнер pill-чипов под .ds-msi__wrapper (flex-wrap).
State Explorer
Light
Dark

Label orientation = Left

gap-x 10/12/12/16 · лейбл прижат к полю (Figma primary MAX)
Лейбл в колонке слева, caption под полем
Top для сравнения — лейбл над полем