Country Select

Forms

About

Searchable country picker with flag emoji, pinned countries, optional dial codes, and single or multiple selection. Search by name or ISO code.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Country Select to your project and fits it to your theme.

Code

How Country Select is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import {
  CountrySelect,
  CountrySelectTrigger,
  CountrySelectValue,
  CountrySelectContent,
  CountrySelectSearch,
  CountrySelectList,
} from "@/components/ui/country-select";

export default function CountrySelectDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-8 text-foreground">
      <div className="w-full max-w-xs">
        <CountrySelect priority={["US", "GB", "CA"]} defaultOpen>
          <CountrySelectTrigger>
            <CountrySelectValue />
          </CountrySelectTrigger>
          <CountrySelectContent>
            <CountrySelectSearch />
            <CountrySelectList />
          </CountrySelectContent>
        </CountrySelect>
      </div>
    </div>
  );
}