|
| 1 | +--- |
| 2 | +tags: component |
| 3 | +layout: component.webc |
| 4 | +title: Money Input |
| 5 | +--- |
| 6 | + |
| 7 | +An input for collecting monetary values. |
| 8 | + |
| 9 | +<article aria-label="Component example"> |
| 10 | + <label for="cost"> |
| 11 | + Amount in pounds |
| 12 | + </label> |
| 13 | + <az-money-input currency="£"> |
| 14 | + <input id="cost" name="cost" /> |
| 15 | + </az-money-input> |
| 16 | +</article> |
| 17 | + |
| 18 | +## Installation |
| 19 | + |
| 20 | +### Manual |
| 21 | + |
| 22 | +1. [Copy the JS code](#) |
| 23 | +2. Include it in your websites JS |
| 24 | + |
| 25 | +### NPM |
| 26 | + |
| 27 | +1. Install the library `npm install @etchteam/interfacez` |
| 28 | +2. Import the JS `import '@etchteam/interfacez/money-input'` |
| 29 | + |
| 30 | +## Usage |
| 31 | + |
| 32 | +The web component should be added to your HTML by wrapping around an `<input>` element. |
| 33 | + |
| 34 | +```html |
| 35 | +<az-money-input currency="£"> |
| 36 | + <input id="cost" name="cost" /> |
| 37 | +</az-money-input> |
| 38 | +``` |
| 39 | + |
| 40 | +This will provide: |
| 41 | + |
| 42 | +- Input attributes |
| 43 | + - `type="text"` |
| 44 | + - `inputmode="decimal"` |
| 45 | + - `placeholder="0.00"` |
| 46 | +- Validation |
| 47 | + - No non-numeric values |
| 48 | + - Disallow more than two decimal places |
| 49 | + - Default required |
| 50 | +- A sensible max-width |
| 51 | +- A currency prop to prefix the input with a currency symbol |
| 52 | + |
| 53 | +### Configuration |
| 54 | + |
| 55 | +#### Max width |
| 56 | + |
| 57 | +Use [input-size](/input-size) to override the max-width setting. |
| 58 | + |
| 59 | +#### Currency |
| 60 | + |
| 61 | +Providing `currency="£"` will prefix the input with “£”. |
| 62 | + |
| 63 | +Remove the prop to provide a custom affix instead. |
| 64 | + |
| 65 | +## Recommendations |
| 66 | + |
| 67 | +### Affix the input |
| 68 | + |
| 69 | +An input “affix” is the bit that goes either side of the field where users input their value. |
| 70 | + |
| 71 | +For the majority of currency formats, a currency symbol or code can be added before the input as a “prefix”. |
| 72 | + |
| 73 | +Affixing monetary inputs with the currency symbol is a quick win, it shows the expected currency and signals that a monetary value is expected. |
| 74 | + |
| 75 | +The affix is especially helpful for mobile or touchscreen users, as it allows a numeric keyboard to be displayed so they can skip finding the currency symbol. |
| 76 | + |
| 77 | +If users are expected to enter a value in a different currency, consider using a currency select box instead of a affix. |
| 78 | + |
| 79 | +### Add a placeholder |
| 80 | + |
| 81 | +A placeholder is a hint that appears in the input field before the user starts typing. |
| 82 | + |
| 83 | +Monetary inputs are a good use-case for placeholders because they can show the expected format of the input, without affecting validity. |
| 84 | + |
| 85 | +Use zero for the placeholder though – suggesting a price might be a bit cheeky. |
| 86 | + |
| 87 | +### Size the input appropriately |
| 88 | + |
| 89 | +Making the input as wide as the expected value indicates to users what they’re expected to enter. |
| 90 | + |
| 91 | +The input should be wide enough to accommodate the largest possible value, so unless you anticipate users entering values in the millions, the input will probably be quite small. |
| 92 | + |
| 93 | +### Use a "text" input type |
| 94 | + |
| 95 | +We recommend using the type="text" attribute instead of type="number". The number input type is designed to capture non-decimal, incrementable numbers. |
| 96 | + |
| 97 | +For example, entering "1.5" and either scrolling inside the input or clicking the up/down arrows that most browsers add to number type inputs, causes the number to be rounded up or down. |
| 98 | + |
| 99 | +This isn’t good for monetary values where decimal place precision is usually crucial. |
| 100 | + |
| 101 | +Additionally, the [Gov UK team identified several other usability and accessibility issues](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) to consider when using number inputs. |
| 102 | + |
| 103 | +### Set the inputmode to "decimal" |
| 104 | + |
| 105 | +This is an important step to ensure the correct keyboard is displayed on mobile devices. |
| 106 | + |
| 107 | +For monetary values, we want a keyboard with numbers, a decimal point, and a comma to cover all possible currency formats. |
| 108 | + |
| 109 | +We suggest using inputmode="decimal" instead of inputmode="numeric" because during testing we found that some IOS devices displayed a keypad that lacked a decimal point. |
| 110 | + |
| 111 | +### Expect unexpected formats |
| 112 | + |
| 113 | +Users will likely enter values in ways we don’t anticipate, but if the input isn’t technically wrong, we should avoid requiring them to amend it. Here are some possible formats to expect: |
| 114 | + |
| 115 | +- Numbers with comma separators "1,000.00" |
| 116 | +- Including the currency symbol "£1,000.00" |
| 117 | +- Not including decimal places "10" |
| 118 | + |
| 119 | +Including the currency code "1,000.00 GBP" or "GBP 1,000.00" might be going above and beyond, but could be worth considering if you’re expecting international users. |
| 120 | + |
| 121 | +### Validate the input |
| 122 | + |
| 123 | +Validation should catch: |
| 124 | + |
| 125 | +- Non-numeric values (excluding the currency code mentioned above if applicable) |
| 126 | +- Values with more than two decimal places |
| 127 | +- Missing values if the field is required |
| 128 | + |
| 129 | +You may want to consider if setting an maximum or minimum value limit is appropriate to warn the customer about before they submit the form. |
| 130 | + |
| 131 | +### Remember to add a label |
| 132 | + |
| 133 | +Labels should be added as well as the placeholder. It’s especially important for users of screen readers where the placeholder won't be announced. |
| 134 | + |
| 135 | +*Read the full post on [etch.co/blog/money-input](https://etch.co/blog/money-input)* |
0 commit comments