Open source @drobinetm/countries-flags
GitHub

Open source country selector

Countries &
Flags
Selector

The same country selector for Angular, React, and Vue. Supports v-model, ngModel, and onChange.

Get started Styling examples View on GitHub

Quick install

Angular

pnpm add @drobinetm/angular-countries-flags

React

pnpm add @drobinetm/react-countries-flags

Vue

pnpm add @drobinetm/vue-countries-flags

Also requires flag-icons as peer dependency.

Why use it

What it includes

Fully controlled API

Works with v-model, [(ngModel)], formControl, and onChange.

Accessible

Includes keyboard support, ARIA listbox roles, aria-selected, aria-expanded, and focus handling.

250+ country flags

Includes ISO 3166-1 alpha-2 countries from country-list and flag-icons. Filter the list or limit the count.

Typed API

Full type exports: Country, CountriesFlagsProps, CountryChangeEvent. Shared from @drobinetm/countries-flags-core.

Easy to style

Override visual tokens with CSS variables like --drm-cf-bg, --drm-cf-radius, and --drm-cf-focus.

Shared core package

@drobinetm/countries-flags-core provides the shared data, types, and utilities used by all three implementations.

Implementations

Pick your implementation

Angular 17+

@drobinetm/angular-countries-flags

Standalone component with ControlValueAccessor. Works with template-driven and reactive forms. 

<drm-countries-flags
  [(ngModel)]="code"
  [filter]="['es','us']"
/>
React 18+

@drobinetm/react-countries-flags

Controlled component with onChange, forwardRef, and typed props. 

<CountriesFlags
  value={code}
  onChange={(e) => setCode(e.code)}
  filter={['es','us']}
/>
Vue 3

@drobinetm/vue-countries-flags

Vue 3 component with <script setup>, v-model, and a @change event. 

<CountriesFlags
  v-model="code"
  :filter="['es','us']"
  @change="onSelect"
/>

API Reference

Shared API across implementations

Prop / Input Type Default Description
max number 0 Max countries shown. 0 = unlimited.
filter string[] [] ISO alpha-2 code whitelist. Empty = show all.
value / ngModel / v-model string | null null Currently selected country code (controlled).
placeholder string "Select a country" Trigger text when no country is selected.
disabled boolean false Disables user interaction.
onChange / (valueChange) / @change CountryChangeEvent — Emits { country, code } on selection.

Theming

Styling

Use CSS variables to adjust the default look. You can override them on the host element or globally.

CSS variables

drm-countries-flags, .drm-cf {
  --drm-cf-bg: rgba(10, 18, 34, 0.76);
  --drm-cf-border: rgba(255,255,255, 0.08);
  --drm-cf-border-hover: rgba(115,190,255, 0.24);
  --drm-cf-focus: #0f6dff;
  --drm-cf-radius: 14px;
  --drm-cf-text: #f7f9ff;
  --drm-cf-placeholder: rgba(196,209,236, 0.56);
  --drm-cf-dropdown-bg: rgba(7,14,28, 0.96);
  --drm-cf-accent: #8ad9ff;
}