المكوّنات · حقل الاسم الرباعي
حقل الاسم الرباعي
الاسم الرسمي في الخليج أربعة أجزاء، لا حقلان
<div class="mini nameq">
<div class="nq-head">
<span data-ar="الاسم كما في الهوية" data-en="Name as in ID">الاسم كما في الهوية</span>
<span class="nq-req" data-ar="مطلوب" data-en="Required">مطلوب</span>
</div>
<div class="nq-grid">
<label><span data-ar="الاسم" data-en="First">الاسم</span><i>محمد</i></label>
<label><span data-ar="الأب" data-en="Father">الأب</span><i>عبدالله</i></label>
<label><span data-ar="الجد" data-en="Grandfather">الجد</span><i>سالم</i></label>
<label><span data-ar="العائلة" data-en="Family">العائلة</span><i>الحربي</i></label>
</div>
<p class="nq-full"><b data-ar="الاسم الكامل" data-en="Full name">الاسم الكامل</b>
<span>محمد عبدالله سالم الحربي</span></p>
</div>
/* pt-scoped */
/* حقل الاسم الرباعي */
.nameq{width:100%;max-width:260px;background:var(--pt-surface);border-radius:var(--pt-radius-md);
border:1px solid var(--pt-border-subtle);padding:10px;display:flex;flex-direction:column;gap:8px}
.nameq .nq-head{display:flex;align-items:center;justify-content:space-between;font-size:9px;
color:var(--pt-text-muted)}
.nameq .nq-req{color:var(--pt-accent);border:1px solid var(--pt-accent);border-radius:99px;padding:0 5px}
.nameq .nq-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.nameq label{display:flex;flex-direction:column;gap:3px}
.nameq label span{font-size:8px;color:var(--pt-text-muted)}
.nameq label i{font-style:normal;font-size:10px;color:var(--pt-text-primary);
background:var(--pt-bg-inset);border:1px solid var(--pt-border-default);
border-radius:var(--pt-radius-sm);padding:5px 7px}
.nameq .nq-full{margin:0;padding-top:7px;border-top:1px solid var(--pt-border-subtle);
display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.nameq .nq-full b{font-size:8px;color:var(--pt-text-muted);font-weight:400}
.nameq .nq-full span{font-size:10.5px;color:var(--pt-accent)}
# Quadruple Name Field
**Role:** You are an Arabic-first UI designer and front-end engineer. Read the whole
specification before writing a single line, then follow it literally. If two requirements
conflict, favour usability over visual effect.
**Goal:** Quadruple Name Field — Official Gulf names have four parts, not two
**Why this component matters:** Official names in Saudi Arabia, Jordan and the Gulf have four parts. A two-field form forces users to cram three names into one box, breaking the match against their ID document.
**Direction:** Genuine RTL — not a mirrored Latin layout. Use logical properties
(`margin-inline-start`, `padding-inline`, `inset-inline-start`, `text-align: start`),
never physical ones (`margin-left`, `left`). The layout must flip with `dir` on its own,
with no duplicated rules.
**Typography:** Cairo for Arabic, IBM Plex Sans for Latin. Arabic line-height must be
`0.18` higher than the Latin equivalent — dots, hamzas and maddas need more vertical room.
Arabic font-size runs `1.06×` the Latin size at the same optical weight.
**Numerals:** Western digits in both languages (`1,234.50`). Only the currency changes:
`ر.س` **after** the number in Arabic, `$` **before** it in English. Jordanian dinar
uses **three** decimal places, not two.
**Colors:** Dark mode — background `#0D142B` · surfaces `#211F54` · borders `#545C91` · text `#918FC2`.
Accent `#ADA9E8` must never exceed 8% of the screen area.
**Language:** Bilingual — every string carries both Arabic and English, and the layout
flips with `dir` automatically.
**States:** `default` · `hover` · `focus` · `active` · `disabled` · `loading` · `error`.
Do not design the resting state alone.
**Accessibility:** Contrast ratio at least `4.5:1`, complete keyboard navigation,
visible focus rings, and honour `prefers-reduced-motion`.
**Output:** Clean HTML and CSS in two separate files. No frameworks, no libraries,
no external dependencies.
**Important:** This component has no equivalent in any global library. Do not imitate a
Latin pattern and translate its labels — build it from Gulf market requirements directly.