Skip to main content
Unified Design System
Search the Design System
Ver. 3.0.0 For the older version visit v2 documentation

Numeric inputs

Help users provide numeric inputs.

When to use this pattern

Follow this pattern whenever you need to ask for numeric inputs.

How it works

The pattern uses the text input component.

Do not limit or validate the users’ input as they type. Run validations as described in the error message component.

Whole numbers

If you only allow whole numbers, use the inputmode and pattern attributes.

Warning

Do not use <input type="number"> as there is a risk of users accidentally incrementing a number when they’re trying to do something else - for example, scroll up or down the page. Make sure to set spellcheck="false".

Example

HTML code

<form action="" class="govcy-form" novalidate="">
    <div class="govcy-form-control">
        <label class="govcy-label govcy-label-primary" for="in1">Credit Card number</label>
        <input id="in1" type="text" class="govcy-text-input govcy-text-input-char_20" spellcheck="false" pattern="[0-9]*" inputmode="numeric" >
    </div>
</form>

This will bring up the numeric keyboard on mobile devices and make it much easier for the users to enter their input.

Decimal numbers

If you allow decimal numbers, use type=”text”. Do not set the inputmode attribute to decimal as it causes some devices to bring up a keypad without a key for the decimal separator. Make sure to set spellcheck="false".

Example

HTML code

<form action="" class="govcy-form" novalidate> 
    <div class="govcy-form-control"> 
        <label class="govcy-label govcy-label-primary" for="in2">Enter your income (€)</label>  
        <input type="text" spellcheck="false" class="govcy-text-input govcy-text-input-char_20" id="in2">  
    </div> 
</form>

Error messages

Make sure to follow the instructions for error messages and error summary when validating user input and to use the text input error variant style.