Мультиселект

Используется

• Используйте простой мультиселект, когда пользователю необходимо выбрать от 5 до 15 вариантов.
• Используйте мультиселект с фильтрацией, когда вариантов выбора больше 15.

Не используется

• Если пользователю нужно выбрать 5 и менее вариантов, используйте Checkbox.

Модификации

Выбрать все

Выбор всех доступных пунктов.

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

Теги

Использования тегов для отображения выбранных пунктов меню.

Группировка пунктов меню

Сортировка пунктов меню по группам.

Строение компонента

0. Лейбл
1. Вспомогательное описание
2. Счетчик / очистка ввода
3. Плейсхолдер
4. Иконка раскрытия/сворачивания списка
5. Контейнер выпадающего списка
6. Пункт меню с чекбоксом
7. Нативный скролл

Лейбл

Название компонента. Текст должен начинаться с заглавной буквы и, для упрощения работы с формами, не должен состоять более чем из трех слов. Не дублируйте лейбл в плейсхолдере или вспомогательном описании.

Вспомогательное описание

Предоставляет дополнительную информацию о компоненте, если информации в лейбле недостаточно.

Счетчик / очистка ввода

Показывает количество выбранных элементов и по клику сбрасывает выбор

Плейсхолдер

Подсказка пользователю, в случае использования плейсхолдера в качестве подсказки, предложение нужно начинать с глагола.

Иконка раскрытия/сворачивания списка

По клику открывает выпадающий список.

Контейнер выпадающего списка

Контейнер, в котором располагаются элементы списка

Пункт меню с чекбоксом

Пункт меню или ссылка

Нативный скролл

Нативный скролл, появляющийся если пункты не помещаются в заданную высоту выпадающего списка

Встроенные компоненты

Checkbox

Цвета

Размеры

Типографика

Поведение

• Опции внутри списка сортируются в алфавитном порядке
• Клик по счетчику сбрасывает выбор пользователя
• Выпадающий список закрывается по клику вне области списка
• При повторном открытии выбранные пункты перемещаются в начало списка с сортировкой в алфавитном порядке
• Если выбран пункт, цвет плейсхолдера меняется

Состояния