Components Currency input

Important

This component is archived

You should use prefixes and suffixes in the GOV.UK Design System to help users enter things like currencies.

Last updated: 11 October 2022

Open this example in a new window

<div class="govuk-form-group">
  <label class="govuk-label govuk-!-font-weight-bold" for="amount-1">
    Amount
  </label>

  <div id="amount-1-hint" class="govuk-hint">
    Enter the amount you want to exchange
  </div>

  <span class="moj-label__currency">&pound;</span>
  <input class="govuk-input moj-input__currency govuk-input--width-10" id="amount-1" name="amount" type="text" aria-describedby="amount-1-hint" autocomplete="off" pattern="[0-9]*">
</div>

Nunjucks macro options

Container

Name	Type	Required	Description
id	string	Yes	Optional id attribute to add to the text input.
name	string	Yes	Name attribute for the text input.
value	string	No	Optional value of the text input.
type	string	No	Type of input control to render. Defaults to text.
formGroup	object	No	Options for the form-group wrapper. See formGroup.
label	object	No	Options for the label component (e.g. text). See label.
hint	object	No	Options for the hint component (e.g. text). See hint.
errorMessage	object	No	Options for the errorMessage component (e.g. text). See errorMessage.
currencyLabel	object	No	Options for the currency label (e.g. text). See currencyLabel.
classes	string	No	Classes to add to the text input.
attributes	object	No	HTML attributes (for example data attributes) to add to the text input.

formGroup

Name	Type	Required	Description
classes	string	No	Classes to add to the form group wrapper.

Label

Name	Type	Required	Description
for	string	Yes	The value of the for attribute, the id of the input the label is associated with.
text	string	Yes	If html is set, this is not required. Text to use within the label. If html is provided, the text argument will be ignored.
html	string	Yes	If text is set, this is not required. HTML to use within the label. If html is provided, the text argument will be ignored.
isPageHeading	boolean	No	Whether the label also acts as the heading for the page.
classes	string	No	Classes to add to the label tag.
attributes	object	No	HTML attributes (for example data attributes) to add to the label tag.

Hint

Name	Type	Required	Description
id	string	No	Optional id attribute to add to the hint span tag.
text	string	Yes	If html is set, this is not required. Text to use within the hint. If html is provided, the text argument will be ignored.
html	string	Yes	If text is set, this is not required. HTML to use within the hint. If html is provided, the text argument will be ignored.
classes	string	No	Classes to add to the hint span tag.
attributes	object	No	HTML attributes (for example data attributes) to add to the hint span tag.

errorMessage

Name	Type	Required	Description
id	string	No	Optional id attribute to add to the error span tag.
text	string	Yes	If html is set, this is not required. Text to use within the error. If html is provided, the text argument will be ignored.
html	string	Yes	If text is set, this is not required. HTML to use within the error. If html is provided, the text argument will be ignored.
classes	string	No	Classes to add to the error span tag.
attributes	object	No	HTML attributes (for example data attributes) to add to the error span tag.

currencyLabel

Name	Type	Required	Description
text	string	Yes	If html is set, this is not required. Text to use within the error. If html is provided, the text argument will be ignored.
html	string	Yes	If text is set, this is not required. HTML to use within the error. If html is provided, the text argument will be ignored.
classes	string	No	Classes to add to the currency span tag.

Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with .html can be at risk from cross-site scripting attacks. More information about security vulnerabilities can be found in the Nunjucks documentation.

{%- from "moj/components/currency-input/macro.njk" import mojCurrencyInput -%}

{{ mojCurrencyInput({
  id: "amount-1",
  classes: "govuk-input--width-10",
  name: "amount",
  label: {
    text: "Amount",
    classes: "govuk-!-font-weight-bold"
  },
  hint: {
    text: "Enter the amount you want to exchange"
  }
}) }}

When to use

Use the currency input component to help users enter an amount of money in a specified currency.

Use the currency input component when you need users to tell you an amount of money in a particular currency, for example pounds sterling, euros or dollars.

How to use

The component uses type="text" rather than type="number" to ensure that all users can enter the decimal symbol. The pattern attribute is used to trigger a numeric keypad on iOS devices.

The input does not prevent users from typing invalid numbers because that makes the interface seem unresponsive. Instead rely on clear labels, hints and error messages.

The currency symbol is styled differently to the input so that users don't confuse it with the input's value.

Research

The design, code and guidance here are based on recommendations from the community.

This component has been used successfully in the following services:

• Claim fees for Crown court defence (Legal Aid Agency)