Forms · Selection

MultiSelect

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

LabelOut — States

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

LabelOut — Chips Group & Help

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

LabelIn — States

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

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.
.ds-ms__tagelement—Компактный тег 20px / 4px radius внутри поля.
.ds-ms__overflowelement—Бейдж переполнения "+N" (nba-30 bg, 20px).
.ds-ms__chipselement—Контейнер pill-чипов под полем (flex-wrap, gap 8px 6px).
.ds-ms__chipelement—Pill-чип 24px / 999px radius в группе снаружи поля.
LabelIn MultiSelect (.ds-msi)
Prop / AttrTypeDefaultDescription
data-filledattr—На .ds-msi__wrapper — label всплывает вверх, теги видны.
data-errorattr—Красный box-shadow + label + chevron.
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