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

You should allow the user to enter numbers up to one or 2 decimal places, for example £10.4 or £10.40.

Remove these characters and round up or down any amounts if necessary before validating.

              <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 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 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"
}) }}
                

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