Select

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

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

Когда применять?

• Когда нужно выбрать одно или более значений из определенного списка.

Когда не применять?

• Когда нужно отобразить сразу все значения для выбора. Для этого могут подойти Radio, Checkbox или Radio Button.

§Варианты

Одиночный выбор

• Используется, когда нужно выбрать одно значение из списка.
• После выбора значения выпадающий список закрывается.
• Выбранное значение отображается внутри контрола.

Множественный выбор

• Используется, когда может понадобиться выбрать больше одного значения из списка.
• В списке выбранное значение помечается галочкой слева.
• Выбранные значения отображаются в контроле через запятую.
• Чтобы закрыть выпадающий список и применить выбранные значения, необходимо нажать на пустую область снаружи или на подтверждающую кнопку (при наличии) внутри списка.

§Типы

Существует два вида: Normal и Clear, которые имеют одинаковый набор функций, но выглядят по-разному и применяются в зависимости от контекста.

Normal

• Наиболее часто используемый вид.
• Отличительной особенностью является то, что у компонента есть обводка 1 px, а элементы внутри (текст и шеврон) расположены с отступами от краев.
• Используется в формах, когда между компонентами необходимо использовать свободное пространство в виде отступов между элементами в форме.

Clear

• Отличительной особенностью является то, что у компонента отсутствует обводка, а элементы внутри (текст и шеврон) располагаются в края поля для ввода.
• Используется, когда вид Normal создает визуальный шум.
• При использовании этого вида важно убедиться, что суть компонента остается понятной для пользователя.

§Структура

1. Внутренний лейбл (Inline label)
2. Значение
3. Иконка очистки (Clear icon)
4. Шеврон (Chevron)
5. Иконка ошибка (Error icon)
6. Описание ошибки

§Внутренний лейбл (Inline label)

• Является опциональным элементом.
• Усиливает значение имени поля, чтобы лучше объяснить, что нужно выбрать в списке.
• Может заменить внешний лейбл в форме.

§Значение

• Является обязательным элементом.
• По умолчанию используется в качестве подсказки, чтобы помочь понять, что предстоит выбрать из списка значений.
• Место, где отображается выбранное значение или значения.

§Иконка очистки (Clear icon)

• Является опциональным элементом.
• Используется, если нужно быстро очистить компонент от выбранных значений или вариантов значений, не вызывая выпадающий список.
• Может отображаться, когда выбрано хотя бы одно значение.
• После очистки фокус остается на компоненте.
• По наведению меняет цвет.

§Шеврон (Chevron)

• Является обязательным элементом.
• Применяется, чтобы отличить от других визуально подобных компонентов (например, TextInput) для идентификации компонента в форме.
• Компонент может быть только с шевроном, например, когда нужно сделать компактный вид.
• Несмотря на наличие шеврона, вся область компонента является кликабельной.

§Иконка ошибки (Error icon)

• Выводится только в состоянии Inline Error.
• Работает в паре с Tooltip с описанием ошибки при наведении на иконку. Помогает сохранить информативность в компактном представлении.

§Описание ошибки

• Выводится только в состоянии Outline Error.
• Описание ошибки располагается слева внизу поля, когда нужно сразу отобразить причину ошибки.

§Состояния

Имеет несколько состояний: Suggest, Default, Hover, Disabled, Active, Inline Error и Outline Error.

1. Suggest — неактивное состояние, когда нет прямого взаимодействия с компонентом и в нем еще ничего не выбрали. В таком состояние может подсказывать, что тут можно выбрать вариант значения и являться подсказкой (хинтом).
2. Default — неактивное состояние, когда нет прямого взаимодействия с компонентом и в нем уже что-то выбрали. В таком состоянии значение подсказки (хинт) меняется на то, что введено было выбрано внутри выпадающего списка.
3. Hover — активное состояние, когда курсор наводится на область компонента.
4. Disabled — неактивное состояние компонента, когда нет возможности с ним взаимодействовать.
5. Active — активное состояние, когда пользователь нажал на контрол. По нажатию открывается выпадающий список.
6. Outline error — состояние компонента, когда происходит ошибка при валидации, которая отображается внизу поля с пояснением.
7. **Inline errorСостояние компонента, когда происходит ошибка при валидации, но сама ошибка не выводится, а отображается специальная иконка, при наведении на которую появляется тултип с ошибкой.

§Размеры

Существует 4 размера компонента: S, M, L, и XL.

Размер	Высота	Стиль текста	Скругление
searchrequest.md	24	Body 1	5
M	28	Body 1	6
L	36	Body 1	8
XL	44	Body 2	10

В зависимости от размера у контрола меняются высота и скругления углов полей, а также отступы внутри поля и размер текста.

Радиусы скругления зависят от размера и задаются переменными.

1. S — используется там, где стандартный контрол слишком велик (таблицы, небольшие карточки).
2. M — основной размер, используется в большинстве форм и в фильтрах.
3. L — используется очень редко.
4. ХL — используется в коммуникационной среде, например, на сайтах и лендингах.

§Рекомендации по использованию

1. Работа с полем

   • Ширину поля рекомендуется делать в зависимости от содержимого. Например, для длинных значений или множественного выбора можно сделать элемент больше по ширине.
   • Используйте один размер с другими комплементарными компонентами в форме. Если вы выбрали для работы M, другие компоненты должны быть такого же размера.
   • Используйте крестик для очистки, когда работаете с множественным выбором, так удобнее и быстрее очищать поле от содержимого.
   • Высоту контрола менять нельзя. Высота поля может быть только фиксированного размера.

2. Внешний заголовок поля (Outline label)

   

   • Краткое название поля (желательно не больше одной строки).
   • Необходимо размещать по одной линии со значением внутри поля в формах.

3. Подсказка с тултипом

   

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

4. Описание

   

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