# XWUICities

A searchable city picker that renders either as a dropdown (`variant: 'select'`, the default) or a flat `'list'`, composing XWUISelect or XWUIList under the hood. Each entry pairs the country flag with a default English city name and a localized country name in its description, and the dataset can be narrowed to one ISO country via `countryCode` or replaced entirely through `data.cities`.

## Basic Usage

City picker over the built-in dataset, with a custom label and placeholder.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Searchable select city picker using the built-in city list.
```

## Filtered By Country

Restricts the options to a single country (`countryCode: "SA"`) and renders them as a searchable list instead of a dropdown.

```example
file: examples/FilteredByCountry.ts
html: examples/FilteredByCountry.html
title: Filtered By Country
description: List-variant picker limited to Saudi cities via countryCode.
```

## Custom City Dataset

Replaces the built-in list with a curated set of Gulf hubs, preselects one, and shows helper text.

```example
file: examples/CustomCityDataset.ts
html: examples/CustomCityDataset.html
title: Custom City Dataset
description: Picker driven by a custom data.cities array with a preselected value.
```

## Compact Non-Searchable

A UAE-only select with search disabled and a shorter dropdown for a tidy checkout step.

```example
file: examples/CompactNonSearchable.ts
html: examples/CompactNonSearchable.html
title: Compact Non-Searchable
description: Non-searchable, country-filtered city dropdown for checkout.
```

```api
```