# İl / ilçe seçici

> Erişilebilir bağımlı il/ilçe seçimi ve Türkçe duyarsız arama bileşenleri.

```bash
npx trkit add il-ilce-secici il-ilce-arama
```

## IlIlceSecici

İki bağımlı yerel `<select>`. Mobilde sistem seçicisi açılır, klavyeyle harf yazarak gezinilir, JavaScript yüklenmeden de form gönderilebilir.

```tsx
"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:

```ts
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.

```tsx
import { IlIlceArama } from "@/components/trkit/il-ilce-arama";

<IlIlceArama onSelect={({ il, ilce, label }) => setKonum({ il, ilce })} placeholder="İl veya ilçe arayın" />
```