Bilingual Name Field

Beta

The name in Arabic and the name in English as on the passport, each typed in its own direction, in the same order as the ID.

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 bilingual-name-field
Also works with shadcn: npx shadcn@latest add @ritla/bilingual-name-field
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

bilingual-name-field.tsx

import { BilingualNameField } from "@/components/ui/bilingual-name-field";<BilingualNameField name={{ ar: "nameAr", en: "nameEn" }} onValueChange={setName} />

API reference

BilingualNameField

Prop	Type	Default	Description
`value / defaultValue / onValueChange`	`{ ar, en }`	None	Both names.
`error`	`{ ar?, en? }`	None	Your own errors; otherwise each name is checked for its script when its field is left.
`name`	`{ ar?, en? }`	None	The two fields' form names.
`required / disabled`	`boolean`	`true / false`	As on the Input field.
`isArabicName / isLatinName`	`(value) => boolean`	None	The script checks.

Accessibility

ARIA

Each field carries its lang and dir, so a screen reader speaks each name in its language.
The error says what to do, and never shows before the field is left.

Arabic and RTL notes

Mirrors

Labels and hints follow the page.

Does not mirror

The Arabic field always types right to left and the English one left to right, whatever the page direction.

Numerals: It holds no numbers.
Arabic typography: The Arabic field takes IBM Plex Sans Arabic from its lang="ar", even on an English page.