Iran Map Picker

Renders all 31 provinces as a single responsive SVG. Click a province to select it, click again to clear — or navigate with Tab and press Enter. The value is the province's ISO 3166-2 code (e.g. IR-23 for Tehran).

Last updated October 20, 2018

Overview

Click or keyboard-navigate the map; the selected province shows below.

Installation

$ npx shadcn@latest add @persianlabsui/iran-map-picker

Usage

import { IranMapPicker } from "@/components/ui/iran-map-picker"
 
const [province, setProvince] = useState<string | null>(null)
 
<IranMapPicker value={province} onValueChange={setProvince} />

Examples

Form integration

Pair the picker with any control — the read-only input mirrors the selection:

Behavior

Value — ISO 3166-2 codes (IR-01 … IR-30), stable across renames. IRAN_PROVINCE_SHAPES is re-exported when you need the full list for legends or selects.
Selection — clicking a selected province clears it (null); uncontrolled usage works via defaultValue.
Keyboard — each province is focusable (Tab) and toggles with Enter or Space; focused provinces get a visible outline.
Hover — a zero-delay tooltip follows the cursor showing the province name, and the hovered province fills with the primary color.
Data — boundaries are simplified OpenStreetMap polygons (~25 KB) projected into a fixed 814×748 viewBox, so no mapping library is required.
RTL — fully RTL-safe; labels render in Persian by default alongside English in tooltips and aria-labels.

API Reference

Iran Map Picker

Prop	Type	Default	Description
value	string \| null	—	The selected province's ISO 3166-2 code (e.g. "IR-23" for Tehran). Use when controlled.
defaultValue	string \| null	—	The initially selected province code when uncontrolled. Defaults to null.
onValueChange	(value: string \| null) => void	—	Called with the province code when a province is selected, and with null when the selected province is clicked again to clear.
disabled	boolean	—	Disables every interaction with the map — provinces ignore clicks and keyboard input, and the whole map dims.
className	string	—	Applied to the root <svg>. The map scales responsively through its viewBox; size it from here (e.g. max-w-md).

Edit this page on GitHub

PreviousInput OTP NextItem