# Country Select

> A lightweight native country select with emoji and optional calling codes.

A shadcn/ui block from the [@flagcn](https://flagcn.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flagcn/country-select).

- Page, with a live preview: https://shadcn.exchange/r/flagcn/country-select
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flagcn/country-select-light-282b9e599f4f1a85.png
- Registry item: https://flagcn.dev/r/country-select.json
- Categories: countries, forms, select
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://flagcn.dev/r/country-select.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `native-select`, `@flagcn/country-data`

## Notes from the registry

Use when native select behavior is preferable to a searchable picker.

## Files

### `src/components/flags/country-select.tsx`

```tsx
// SPDX-License-Identifier: MIT

import type * as React from "react"

import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

import { countryData, type CountryCode } from "./data/countries"

export interface CountrySelectProps extends Omit<React.ComponentProps<typeof NativeSelect>, "value" | "defaultValue" | "onChange"> {
  value?: CountryCode
  defaultValue?: CountryCode
  onValueChange?: (code: CountryCode) => void
  countries?: readonly CountryCode[]
  placeholder?: string
  showCallingCode?: boolean
}

export function CountrySelect({
  value,
  defaultValue,
  onValueChange,
  countries,
  placeholder = "Select a country",
  showCallingCode = false,
  ...props
}: CountrySelectProps) {
  const allowed = countries ? new Set(countries) : undefined
  const options = allowed ? countryData.filter((country) => allowed.has(country.code)) : countryData

  return (
    <NativeSelect
      value={value}
      defaultValue={defaultValue}
      onChange={(event) => onValueChange?.(event.target.value as CountryCode)}
      {...props}
    >
      <NativeSelectOption value="" disabled>{placeholder}</NativeSelectOption>
      {options.map((country) => (
        <NativeSelectOption key={country.code} value={country.code}>
          {country.emoji} {country.name}{showCallingCode ? ` (${country.callingCodes[0] ?? ""})` : ""}
        </NativeSelectOption>
      ))}
    </NativeSelect>
  )
}
```