Поле ввода — это элемент интерфейса для ввода и редактирования данных.
Логика взаимодействия и стиль полей ввода заимствованы из Material design. Элементы отвечают требованиям продуктов QIWI и особенностям поведения пользователей.
Поле ввода состоит из заголовка, текста, линии подчеркивания и подсказки.
Единство полей ввода во всех продуктах QIWI Кошелька достигается за счет одинакового стиля линий, общей структуры и логики взаимодействия.
Отступы и ширина
Обычно поле ввода располагается во всю ширину экрана с боковыми отступами 44px.
Исключение составляют поля ввода, для которых мы знаем фиксированное количество символов. Например, поле ввода номера телефона. В этом случае поле выравнивается по центру страницы.
Состояния полей
Когда поле ввода находится в фокусе, толщина линии составляет 8px, в статичном состоянии — 4px.
Статичное пустое
Статичное заполненное
 | Основной текст | #000 rgb (0, 0, 0) |
 | Заголовок, линия, плейсхолдер | #666 rgb (102, 102, 102) |
 | Маска | #999 rgb (153, 153, 153) |
В фокусе пустое
В фокусе заполненное
 | Линия | #FF9F29 rgb (255, 159, 41) |
| Основной | #000 rgb (0, 0, 0) |
| Заголовок | #666 rgb (102, 102, 102) |
Типографика
| Текст | Шрифт Museo Sans | Размер текста, px | Высота строки, px |
| Основной | 700 | 44 | 52 |
| Текст в маске | 500 | 44 | 52 |
| Заголовок | 700 | 28 | 32 |
| Подсказка | 700 | 28 | 32 |
Кнопка «Стереть»
Кнопку стереть рекомендуем размещать внутри поля ввода.
| Состояние кнопки | Цвет Заливки | Цвет обводки |
| Нормальное | #FFF rgb (255, 255, 255) | #E6E6E6 rgb (230, 230, 230) |
| Нажатое | #FFF rgb (255, 255, 255) | #CCC rgb (204, 204, 204) |
| Неактивное | #F5F5F5 rgb (245, 245, 245) | #CCC rgb (204, 204, 204) |
Ввод PIN-кода
Поле ввода PIN-кода отображается в виде 4 точек.
 | Активный | #000 rgb (0, 0, 0) |
 | Неактивный | #CCC rgb (204, 204, 204) |
