National ID Input

Beta

A field for Saudi National ID and Iqama numbers and the Emirates ID, with the ID type, a hint that says the length and first digit, and an error that says what is wrong.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add national-id-input
Also works with shadcn: npx shadcn@latest add @ritla/national-id-input
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

national-id-input.tsx

import { NationalIdInput } from "@/components/ui/national-id-input";<NationalIdInput name="idNumber" typeName="idType" onValueChange={(value, valid) => …} />

API reference

NationalIdInput

Prop	Type	Default	Description
`types`	`("national-id" \| "iqama" \| "emirates-id")[]`	`["national-id", "iqama"]`	Figma's Type: the types offered; one type hides the switch.
`type / defaultType / onTypeChange`	`NationalIdType`	None	The chosen type.
`value / defaultValue / onValueChange`	`string, (value, valid) => void`	None	Digits only, and whether the number is valid.
`error`	`ReactNode`	None	Your own error (from the server); otherwise the number is checked when the field is left.
`isValidNationalId / formatNationalId / idDigits`	`functions`	None	The check-digit test, the Emirates ID format, and digits from an Arabic keyboard.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowRightArrowLeft`	Between ID types. In Arabic, ArrowLeft goes to the next.

ARIA

The switch is a radio group named ID type.
The hint and error are linked to the field; the error is announced politely and never before the field is left.

Arabic and RTL notes

Mirrors

The label, switch and hint mirror.

Does not mirror

The number is always left to right, and so is its row, like the phone field.

Numerals: Arabic-Indic digits typed on an Arabic keyboard are accepted and turned into Western ones.
Arabic typography: label-16 for the number, label-12 for the hint.