npx trkit add il-ilce-secici il-ilce-aramaIlIlceSecici
İki bağımlı yerel <select>. Mobilde sistem seçicisi açılır, klavyeyle harf yazarak gezinilir, JavaScript yüklenmeden de form gönderilebilir.
"use client";
import { useState } from "react";
import { IlIlceSecici, type IlIlceDegeri } from "@/components/trkit/il-ilce-secici";
const [konum, setKonum] = useState<IlIlceDegeri>({ il: null, ilce: null });
<IlIlceSecici
value={konum}
onChange={setKonum}
name={{ il: "il", ilce: "ilce" }} // form alanı adları
required
/>| Prop | Tür | Açıklama |
|---|---|---|
value | { il: number | null; ilce: string | null } | il plaka kodudur |
onChange | (v) => void | İl değişince ilçe sıfırlanır |
name | { il: string; ilce: string } | Form gönderimi için |
iller | number[] | Yalnızca bu illeri göster (hizmet bölgesi) |
siralama | "alfabetik" | "plaka" | Varsayılan alfabetik (Türkçe harf sırası) |
labels | { il?: string; ilce?: string } | Etiket metinleri |
error | { il?: string; ilce?: string } | Hata mesajları (aria-invalid ile) |
required, disabled, className |
Sunucuda doğrulayın:
import { isValidDistrict } from "@trkit-app-pack/address";
isValidDistrict(form.il, form.ilce);IlIlceArama
Tek kutuda il veya ilçe arama: "kadikoy" yazınca "Kadıköy / İstanbul" önerilir. Klavyeyle (↑ ↓ Enter Esc) kullanılabilir, ARIA combobox desenine uyar.
import { IlIlceArama } from "@/components/trkit/il-ilce-arama";
<IlIlceArama onSelect={({ il, ilce, label }) => setKonum({ il, ilce })} placeholder="İl veya ilçe arayın" />