Поля ввода

Размеры и отступы
Типографика
Состояния полей
Подсказки
Ошибки
Обязательные поля
Неактивные поля
Поля с иконками
Кликабельные элементы
Большие текстовые поля
Выпадающие списки

Размеры и отступы

Боковые отступы от края блока до поля ввода равны обычными или увеличенным отступам внутри интерфейсного блока.

Максимальная ширина поля ввода — 528px.

Ширину поля можно сократить:

1. Когда известно точное количество символов, которые нужно ввести.
2. Когда мы знаем ширину содержимого выпадающего списка.

Не рекомендуется располагать поля ввода в интерфейсных блоках, ширина которых превышает 680px.

Типографика

Для плейсхолдера — Body L 300 Compact (серый), для введенных данных — Body L 300 Compact (черный).

Для заголовка и для подсказок — Body S 300 Compact, серый или черный, для заголовка в фокусе — оранжевый , для кликабельных элементов — синий, для ошибок — красный.

Состояния полей

Статичное пустое

	Текст	#999 rgb (153, 153, 153)
	Линия	#CCC rgb (204, 204, 204)

В фокусе пустое

Заголовок,
линия

#FF8C00
rgb (255, 140, 0)

В фокусе заполненное

	Основной текст	#000 rgb (0, 0, 0)
	Заголовок, линия	#FF8C00 rgb (255, 140, 0)

Статичное заполненное

	Основной текст	#000 rgb (0, 0, 0)
	Заголовок	#999 rgb (153, 153, 153)
	Линия	#CCC rgb (204, 204, 204)

Подсказки

В одну строку

В две строки

Подсказка

#999
rgb (153, 153, 153)

Ошибки

Пустое поле с ошибкой

Незаполненное поле, выведенное из состояния фокуса, выделяется как ошибка.

Заполненное поле с ошибкой

Ошибка в две строки.

Ошибка, линия

#D0021B
rgb (208, 2, 27)

Обязательные к заполнению поля

Этот тип полей не рекомендуется отмечать звездочками и специальными подписями. В статичном состоянии обязательное к заполнению поле выглядит как обычное поле ввода.

Ошибка под полем высвечивается в 2 случаях:

1. Произошла расфокусировка поля.
2. Пользователь завершил ввод данных до того, как заполнил обязательное поле.

Обязательное поле в статичном состоянии