Form

CountrySelect

Pick countries by their localized names, with flags, search, counts and hints.

Features6

API

Theming

Basic

Every country, sorted by name in the current locale; search by name or code.

Value: UA

4 lines

<div class="stack">  <tx-country-select [formControl]="country" [placeholder]="'Country'" [showClear]="true" />  <span class="hint">Value: {{ country.value ?? '—' }}</span></div>

Multiple

Several countries: a few flags and "+N" in the field.

Value: DE, FR, IT, ES, PL

4 lines

<div class="stack">  <tx-country-select [formControl]="markets" [multiple]="true" [placeholder]="'Markets'" />  <span class="hint">Value: {{ markets.value?.join(', ') || '—' }}</span></div>

Counts

Your own list with counts, hints and a disabled country; shape="circle" for round flags.

Field

Inside tx-field the label names the field.

Country of residence

Used for taxes

States

Sizes, filled variant, disabled and read-only.

6 lines

<div class="stack">  <tx-country-select [size]="'small'" [placeholder]="'Small'" />  <tx-country-select [variant]="'filled'" [placeholder]="'Filled'" />  <tx-country-select [formControl]="locked" [ariaLabel]="'Disabled'" />  <tx-country-select [formControl]="shown" [readonly]="true" [ariaLabel]="'Read only'" /></div>

Design tokens

dt changes the select tokens of the field and its panel.