CountrySelect

Code

import { CountrySelect, Field, FieldLabel } from "@fadymondy/nasaq/web";import { useState } from "react";export function Residence() {  const [iso, setIso] = useState("");  return (    <Field>      <FieldLabel>Country</FieldLabel>      <CountrySelect value={iso} onValueChange={setIso} />    </Field>  );}

Forms · beta

Live examples and controls: CountrySelect in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/country-select.json

A single combobox for choosing a country. Each item shows its flag (CountryFlag) and its name in the active language; typing filters by English name, Arabic name or ISO code. The value is the ISO code ("SA").

When to useCopy Anchor Link

• A country field on its own: nationality, country of residence, shipping country.

When not to useCopy Anchor Link

• A full address with city and area: use AddressInput.
• A phone number: use PhoneInput, which has its own country list.

ImportCopy Anchor Link

import { CountrySelect } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { CountrySelect, Field, FieldLabel } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Residence() {
  const [iso, setIso] = useState("");
  return (
    <Field>
      <FieldLabel>Country</FieldLabel>
      <CountrySelect value={iso} onValueChange={setIso} />
    </Field>
  );
}

AnatomyCopy Anchor Link

CountrySelect               div (display: contents)   data-slot="country-select"
├─ input group              Combobox input, clear, chevron
├─ popup                    list of CountryFlag + name
└─ hidden input             only when `name` is set

APICopy Anchor Link

CountrySelectCopy Anchor Link

ExamplesCopy Anchor Link

Gulf countries onlyCopy Anchor Link

import { CountrySelect, PHONE_COUNTRIES } from "@fadymondy/nasaq/web";

const gcc = PHONE_COUNTRIES.filter((c) => ["SA", "AE", "KW", "QA", "BH", "OM"].includes(c.iso));

export const Gulf = () => <CountrySelect countries={gcc} aria-label="Country" />;

From the hubCopy Anchor Link

import { CountrySelect, createHubLocationsDataSource } from "@fadymondy/nasaq/web";

const hub = createHubLocationsDataSource();

export const FromHub = () => <CountrySelect dataSource={hub} aria-label="Country" />;

AccessibilityCopy Anchor Link

The input is a Base UI combobox and a Field control, so FieldLabel names it. Flags are decorative; the name is text.

Caller must localise aria-label and placeholder.

RTL & i18nCopy Anchor Link

Names follow the active language (English or Arabic, falling back to the other when empty); search matches both. The popup takes the direction of the provider.

Styling & tokensCopy Anchor Link

Same as Combobox: border-input, bg-card, rounded-control, focus nq-focus. The wrapper is display: contents, so className only matters for layout contexts such as grid placement. Never override colours with raw hex.

Do / Don'tCopy Anchor Link

• Do store the ISO code; it is stable across languages.
• Don't use it for phone numbers; PhoneInput already has a country list.

RelatedCopy Anchor Link

• AddressInput · PhoneInput · CountryFlag · Combobox

LabCopy Anchor Link

https://nasaq-ui.fadymondy.com/?path=/docs/components-forms-address-input--docs