Currency input

This pattern lets the user enter an amount of money in British pounds.

When to use

Use this pattern when the user must enter an amount of money in pounds. If the user does not have to enter an amount, make it optional.

How it works

The user enters the amount of money.

Allow the user to enter numbers with or without:

spaces
commas
pound symbols (£)
full stops - to indicate pence

Only allow the user to enter whole numbers, or numbers with one or 2 decimal places, for example, £10, £10.4 or £10.40.

If necessary, remove any decimals and round up or down any amounts before validating.

Do not allow numbers with more than 2 decimal places.

Open this example in a new tab Display in English Display in Welsh

HTML
Nunjucks

              <div class="govuk-form-group">
  <label class="govuk-label" for="currency">
    How much does your employer pay towards this?
  </label>
  <div id="currency-hint" class="govuk-hint">
    For example, £600 or £193.54.
  </div>
  <div class="govuk-input__wrapper">
    <div class="govuk-input__prefix" aria-hidden="true">£</div>
    <input class="govuk-input govuk-input--width-10" id="currency" name="currency" type="text" spellcheck="false" aria-describedby="currency-hint">
  </div>
</div>

<button type="submit" class="govuk-button" data-module="govuk-button">
  Continue
</button>

                <div class="govuk-form-group">
  <label class="govuk-label" for="currency">
    Faint mae’ch cyflogwr yn ei dalu tuag at hyn?
  </label>
  <div id="currency-hint" class="govuk-hint">
    Er enghraifft, £600 neu £193.54.
  </div>
  <div class="govuk-input__wrapper">
    <div class="govuk-input__prefix" aria-hidden="true">£</div>
    <input class="govuk-input govuk-input--width-10" id="currency" name="currency" type="text" spellcheck="false" aria-describedby="currency-hint">
  </div>
</div>

<button type="submit" class="govuk-button" data-module="govuk-button">
  Yn eich blaen
</button>

                {% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukInput({
  id: "currency",
  name: "currency",
  label: {
    text: "How much does your employer pay towards this?",
    isPageHeading: false
  },
  hint: {
    text: "For example, £600 or £193.54."
  },
  prefix: {
    text: "£"
  },
  classes: "govuk-input--width-10",
  spellcheck: false
}) }}

{{ govukButton({
  text: "Continue"
}) }}

                  {% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukInput({
  id: "currency",
  name: "currency",
  label: {
    text: "Faint mae’ch cyflogwr yn ei dalu tuag at hyn?",
    isPageHeading: false
  },
  hint: {
    text: "Er enghraifft, £600 neu £193.54."
  },
  prefix: {
    text: "£"
  },
  classes: "govuk-input--width-10",
  spellcheck: false
}) }}

{{ govukButton({
  text: "Yn eich blaen"
}) }}

Error messages

Make sure errors follow the guidance about error messages in the GOV.UK Design System and have specific error messages for specific error states.

If there are more than 2 decimals places

Say ‘[Whatever it is] can only include pounds and pence [optional example]’.

Research

We need more research. If you have used the currency input, get in touch to share your research findings.

Discuss currency inputs on GitHub