Select

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

Из чего состоит

Поле селекта
Внешний лейбл
Внутренний лейбл
Левая иконка
Текст / Подсказка
Описание под полем
Ошибка
Правая иконка
Теги
Выпадающий список
Пункт выпадающего списка
Текст пункта выпадающего списка
Левая иконка пункта выпадающего списка
Правая иконка пункта выпадающего списка
Кнопка выпадающего списка
Скроллбар
Поле поиска

Основные свойства

Тема селекта (Theme)

Состояние селекта (State)

Размер селекта (Size)

Вид селекта (View)

Форма селекта (Form)

Размер выпадающего списка (Size)

Вид выпадающего списка (View)

Форма выпадающего списка (Form)

Мод пункта выпадающего списка (Mode)

Состояние пункта выпадающего списка (State)

Размер пункта выпадающего списка (Size)

Отключаемые элементы

👁 Выпадающий список

👁 Внешний заголовок (Outside Label)

👁 Внутренний заголовок (Inside Label)

👁 Текст (Text)

👁 Подсказка (Placeholder)

👁 Описание (Description)

👁 Ошибка (Error)

👁 Левая иконка (Left Icon)

👁 Теги (Tag 1 / Tag 2 / Tag 3)

👁 Правая иконка (Right Icon)

👁 Скроллбалр (Scrollbar)

👁 Левая иконка пункта выпадающего списка (Left Icon)

👁 Правая иконка пункта выпадающего списка (Right Icon)

👁 Текст пункта выпадающего списка (Text)

Редактируемые элементы

✏️ Внешний заголовок (Outside Label)

✏️ Внутренний заголовок (Inside Label)

✏️ Текст (Text)

✏️ Подсказка (Placeholder)

✏️ Описание (Description)

✏️ Ошибка (Error)

✏️ Левая иконка (Left Icon)

✏️ Текст Тегов (Tag 1 / Tag 2 / Tag 3)

✏️ Правая иконка (Right Icon)

✏️ Левая иконка пункта выпадающего списка (Left Icon)

✏️ Правая иконка пункта выпадающего списка (Right Icon)

✏️ Текст пункта выпадающего списка (Text)

✏️ Текст кнопки пункта выпадающего списка (Text)

Ошибка

Сообщение об ошибке появляется, когда нарушается валидация. Текст сообщения устанавливается для каждого нарушения. Одновременно может быть выведено несколько сообщений об ошибке. Каждое новое сообщение начинается с новой строки. Состояние поля поиска меняется на “State = Error”.

По ширине контейнера

Можно растягивать в ширину под внешний контейнер.

Внутренние горизонтальные отступы (View = Underline)

Можно отключать внутренние горизонтальные отступы в селекте при выборе view “underline”.

Подсветка результатов

Подсветка результатов по частичному совпадению. Цвет выделенного текста “...text&icons-20”.

Не найдено

Если ничего не найдено, то в выпадающем списке появляется надпись «Не найдено».

Функционал кнопки

Кнопка в дропдауне имеет весь функционал обычной кнопки (не только ссылки, а, например, какое-нибудь действие: удалить/подтвердить/отправить/включить). Настраивается на проекте.

Скролл вкл/выкл

Если скролл включен, то высота дропдауна фиксированная, как отрисовано на дизайне. «кнопка» и «поиск» не учитываются в фиксированной высоте и не скроллятся вместе с пунктами.
Если скролл выключен, то высота дродпауна динамическая и зависит от количества пунктов внутри. При этом, высота может достигать любых размеров, выходя за рамки экрана.

Количество строк в дропдауне

Ограничение по количеству строк с текстом в пункте дропдауна можно настраивать: 1/2/3/4 строки.
Если есть иконка, то она выравнивается по верху. В размере L у иконки дополнительный отступ 4px сверху.

Тултип при наведении на скрытый текст пункта

При наведении на пункт, текст которого скрылся, появляется тултип с полным текстом.

Иконка-изображение

Иконка может быть любым изображением.

Иконка-чекбокс/радио

Левая иконка выпадающего списка может быть чекбоксом или радио.

Вложенность пунктов дропдауна

У пунктов дропдауна может быть вложенность (нажатие на пункт раскрывает другие пункты следующего уровня вложенности). Иконка справа — фиксированная (стрелка).
В раскрывающихся пунктах со стрелкой справа, после нажатия меняется только цвета текста и иконки на такой же, как у пунктов в состоянии “Active”, а фон пункта остается прежним.
Каждый уровень вложенности: +16px слева внутри пункта дропдауна.