One-time password
Use One-time password to help users to enter an automatically generated numeric string of characters.
When to use this component
Use One-time password when you’re asking users to authenticate single transaction or login session.
How it works
The One-time password usually consists of 4 or 6 fields to let users enter to enter an automatically generated numeric string of characters.
The above fields are grouped together in a <fieldset> with a <legend> that describes them, as shown in the examples on this page. This is usually a sentence, like ‘Verify code’.
If you’re asking one question per page, you can set the contents of the <legend> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.
You can use the HTML below.
Use the autocomplete attribute for One-time password
Use the autocomplete attribute when you’re asking for One-time password. This lets browsers autofill the information on a user’s behalf if they’ve entered it previously.
To do this, set the autocomplete attribute on each input field to one-time-code. See how to do this in the HTML tab in the following example.
Error message
If you’re highlighting the whole One-time password, style all the fields like this:
Make sure errors follow the guidance in error message and have specific error messages for specific error states.
If there’s more than one error, show the highest priority error message. In order of priority, show error messages about:
- missing or incomplete One-time password.
- information that One-time password cannot be correct (for example invalid password).
- information that fails validation for another reason.
If nothing is entered
Highlight the One-time password as a whole.
Say ‘Το πεδίο είναι υποχρεωτικό.’
If One-time password is incomplete
Highlight the One-time password as a whole.
Say ‘Έχετε συμπληρώσει λιγότερα από [ό,τι λείπει] ψηφία.’. For example, ‘Έχετε συμπληρώσει λιγότερα από 6 ψηφία.’
If One-time password is incorrect
Highlight the One-time password as a whole.
Say ‘Ο κωδικός που έχετε εισάγει είναι λάθος.’