Поле ввода с валютой Currency

Поле предназначено для ввода денежных сумм.

Используйте такое поле, когда нужно вводить значение в рублях, долларах или другой валюте. Оно форматирует введенное значение и помогает пользователю не ошибиться при вводе.

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

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

Рубль, доллар и евро обозначаются специальными символами ₽, $ и €. Для удобства верстки интерфейса все знаки валют ставятся справа от поля ввода.

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

Каждый третий разряд на лету отбивается тонкой шпацией (U+2009, &thinsp).

Тонкие шпации не копируются в буфер обмена и не считаются за символ при удалении символов, перемещении курсора стрелками с клавиатуры ← → или выделении с шифтом. Они нужны только для визуального разделения на разряды.

Например, если поставить курсор после такого пробела и нажать Backspace, он удалится вместе с предыдущим символом:

Поле игнорирует ввод любых символов, кроме цифр, точки и запятой. При попытке ввести недопустимый символ, поле вспыхивает синим. Тултип с текстом ошибки при этом не показывается, т. к. пользователь и сам поймет в чем проблема, а тултип будет только отвлекать:

Точка, слеш (/), буква б или ю на лету заменяются на запятую. Слеш, б и ю находятся на тех же клавишах, что точка и запятая, и пользователь может ввести их, забыв сменить раскладку.

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

Третий символ копеек, по умолчанию, игнорируется.

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

Исключение — курсы валют. Они могут вводится с 4 символами после запятой.

В этом случае игнорируется ввод пятого символа и нельзя ввести запятую дальше, чем на 4 символа от правого края числа.

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

Максимальное количество вводимых цифр в поле — 15.

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

Если пользователь введет дробное значение, при потере фокуса оно должно округлиться по правилу, предусмотренному в данной форме отчетности. Если правило не описано, округление производится по математическому правилу: до 0,49 в меньшую сторону, после 0,5 в большую.

Если округлять за пользователя по каким-то причинам нельзя, при вводе запятой или точки сразу же показываем сообщение об ошибке:

Если по формату допускаются копейки, показывается плейсхолдер «0,00».

Дробная часть числа отделяется от основной запятой.

Дробная часть показывается всегда. Если введено значение без копеек, при потере фокуса добавляются нули:

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

Значение в поле по умолчанию выравниваниется по правому краю:

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

Меняйте правое выравнивание на левое, если значения других полей в колонке выровнены по левому краю.

При клике по полю и при переходе табом поле выглядит одинаково: появляется чёрная рамка, которая сохраняется до потери фокуса.

При получении фокуса плейсхолдер исчезает сразу, а не после ввода первого символа, как в обычном поле:

Поле с ошибкой подсвечивается красной рамкой.

О поведении полей ввода с ошибками читайте в гайде по валидации.