Поле с валютой CurrencyInput

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

Когда использовать

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

Описание работы

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

Значения могут быть положительными и отрицательными.

Два поля со знаком ₽: значение 2402 и отрицательное значение −2402

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

Поле с серым плейсхолдером «0,00» и знаком ₽, затем оно же в фокусе с чёрной рамкой — плейсхолдер исчез, в поле только курсор

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

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

Поля с суммой и названием валюты справа, склонённым по числу: 230 «белорусских рублей» и 231 «белорусский рубль»

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

Поле в фокусе со значением 723, после нажатия клавиши «1» в нём «7 231» — тысячи отделились пробелом

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

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

Поле в фокусе, курсор стоит после пробела в «7 231»; после нажатия Backspace в поле «231» — пробел удалился вместе с цифрой 7

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

Если разрешено вводить отрицательные значения и пользователь ввёл дефис (-), короткое тире (–) или тире (—), то контрол автоматически заменяет их на символ минуса (−).

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

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

Для хранения чисел мы используем стандартный тип данных «число двойной точности», у него есть свои ограничения.

Но пятнадцати цифр достаточно, чтобы ввести сумму до 10 триллионов рублей с точностью до копейки.

Поле без копеек

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

Поле с серым плейсхолдером «0» и знаком ₽, затем оно же в фокусе — плейсхолдер исчез, в поле только курсор

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

Поле в фокусе со значением «123,45», затем оно же без фокуса — значение округлено до 123

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

Поле с красной рамкой и значением «123,45», рядом тултип «Сумму нужно указать без копеек»

Поле с копейками

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

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

Поле со значением «32 723,70» и знаком ₽

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

Поля в фокусе со значениями «32 723» и «32 723,3», затем они же без фокуса — «32 723,00» и «32 723,30»: копейки дополнились нулями

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

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

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

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

Дизайн

Размер и расположение

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

Выравнивание

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

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

Колонка полей с суммами, выровненными по правому краю: «Январь» — 992 230 ₽, «Февраль» — 1 112 090 ₽, «Март» — пустое поле с плейсхолдером «0»

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

Колонка полей, выровненных по левому краю: «ФИО» — «Василий Петров», «Должность» — «Директор», «Сумма» — пустое поле с плейсхолдером «0» слева и знаком ₽

Валидация

Подробнее о поведении полей ввода с ошибками — в гайде «Валидация».

Доступность

Управление клавиатурой

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

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