GCC Address Form

Beta

An address form whose fields follow the country: the Saudi National Address short code or full address, and the UAE emirate, area and Makani number with no postal code.

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 gcc-address-form
Also works with shadcn: npx shadcn@latest add @ritla/gcc-address-form
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

gcc-address-form.tsx

import { GccAddressForm } from "@/components/ui/gcc-address-form";<GccAddressForm name="address" onValueChange={setAddress} />

Examples

UAE

Emirate, area, street and building, and the Makani number.

EnglishMirroredArabic

Get the code

LTR →

API reference

GccAddressForm

Prop	Type	Default	Description
`countries`	`("SA" \| "AE")[]`	`["SA", "AE"]`	Figma's Country: the countries offered.
`value / defaultValue / onValueChange`	`GccAddress`	None	The address: the country and its fields.
`cities`	`SelectOption[]`	None	Saudi cities as a list; a text field without it.
`errors`	`Partial<Record<keyof GccAddress, ReactNode>>`	None	Your own errors; otherwise the codes are checked when their fields are left.
`name`	`string`	None	Prefixes the fields' form names: `address.street`.
`gccPatterns`	`{ shortAddress, building, postalCode, makani }`	None	The patterns the checks use.

Accessibility

ARIA

Changing the country swaps the fields below; every field keeps its own label.
The “Or the full address” rule is a separator; either address is enough.

Arabic and RTL notes

Mirrors

Labels, fields and selects mirror; the building number sits on the right and the postal code on the left.

Does not mirror

The short address, building number, postal code and Makani number stay left to right.

Numerals: Arabic-Indic digits typed into the codes become Western digits, and letters become capitals.
Arabic typography: label-16 in the fields, label-12 for the hints.