Skip to main content

afrigov is an open-source project. It is not a government website and is not affiliated with any government.

Previewing neutral core Change

afrigov Accessible government design system

National ID number

Every country has one, and every country writes it differently. The pack says what it is called, where to find it, how long it is and what it looks like. The input follows.

When to use

When a service needs to match a person to a government record. Ask for it once, as late in the journey as possible.

When not to use

As a login or a password. An ID number is not a secret. And never ask for it "for the records" when the service does not use it.

As printed on your national ID
Show HTML
<div class="ag-field ag-mb-0">
  <label class="ag-label" for="nid" data-docs-string="id-name">National ID number</label>
  <span class="ag-hint" id="nid-hint" data-docs-string="id-hint">As printed on your national ID</span>
  <input
    class="ag-input ag-id-input"
    id="nid"
    name="national-id"
    type="text"
    autocomplete="off"
    spellcheck="false"
    aria-describedby="nid-hint"
    data-docs-id-input
  />
</div>

Preview a country at the top. Nigeria's NIN is 11 digits and opens the number keypad; Ghana's card number is letters and digits with hyphens and keeps the full keyboard.

How it works

  • Label from id.name, hint from id.hint. Say where on the document the number is printed.
  • maxlength from id.length and pattern from id.pattern, so the browser can check the shape before the server does.
  • inputmode="numeric" when the pattern is all digits, so phones show the number keypad.
  • autocomplete="off" and spellcheck="false": browsers should not guess or correct an identifier.
  • Accept spaces and hyphens people type from habit. Strip them on the server.

Errors

Say the shape, not the rule: "Enter your NIN. It is 11 digits, on your NIN slip." Link to it from the error summary.

Pack fields

id.name, id.hint, id.length, id.pattern, id.document, id.authority.