Choice & selection

AppCountrySelect

A searchable country picker: every country with its flag, valued by ISO code.

<app-country-select name="country" label="Country" />

<app-country-select> is the country picker: a searchable select holding every country with its flag. It posts the two-letter ISO code (IN), so the value is stable whatever language or spelling the name shows in.

The country list and the flags live once in the shared <wui-country-select> element, so no product keeps its own list and the helper takes no option children. The Razor <app-country-select> and the React <AppCountrySelect> render the same control. Flags are SVG from @webority/theme, not emoji, because Windows has no flag emoji font.

The flags are an opt-in stylesheet, not part of wui-components. A site that renders this picker links _content/Webority.Ui.Razor/css/webority-flags.css after the theme stylesheet, or imports @webority/theme/scss/flags once after wui-components in its own SCSS; without it every flag is an empty grey box.

When to use

Use it when

  • A form field asks which country: address, billing, nationality, business registration.

Reach for something else when

  • It is a phone number with its country code. → AppPhoneNumberInput
  • The list is regions or markets that are not countries. → AppSelect

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the picker above it.

<app-country-select name="country" label="Country" value="IN" />

Basic

Every country, searchable. Type part of a name to jump to it.

A country field
Show code 
<app-country-select name="home-country" label="Country" value="IN" />

A shortlist

Pass countries to offer only some. They are listed alphabetically by name; a short list rarely needs the search box.

Only the countries you serve
We invoice in these countries only.
Show code 
<app-country-select name="billing-country" label="Billing country"
    countries="IN,AE,GB,US,SG" searchable="false" clearable="true"
    hint="We invoice in these countries only." />
The value is the ISO code, never the nameStore and post GB, not United Kingdom. Names change and differ by language; the code does not.

Sizes and states

size="sm"
default
size="lg"
empty
error
Pick a country
disabled

Attributes

AttributeTypeDefaultDescription
asp-forModelExpression-Binds name, id, value, label and required from the model.
namestring-Form field name; the ISO code posts under it.
valuestring-Selected ISO 3166-1 alpha-2 code, e.g. IN.
countriesstringevery countryComma-separated ISO codes that limit the list (React takes an array). Listed alphabetically; unknown codes are ignored.
searchablebooltrueShow the search box in the menu.
clearableboolfalseAdds a control that clears the choice.
placeholderstringSelect countryShown when nothing is chosen.
search-placeholderstringSearch countries...Placeholder of the search box.
sizestringmdsm / md / lg, the same scale as <app-input>, so it lines up with text fields. An unknown value throws.
labelstring-Field label; also the accessible name.
floating-labelboolfalseLabel sits inside and slides up.
requiredboolfalseRequired mark and native required.
disabledboolfalseDisables the control.
hintstring-Help text under the control.
errorstring-Error text; marks the control invalid.
helpstring-Info-tip content beside the label.
help-labelstringMore informationInfo-tip button label.
aria-labelstring-Explicit accessible name for the control. Wins over the label-derived name, needed for a label-less picker.
aria-labelled-bystring-Forwarded verbatim onto the control (React aria-labelledby).
aria-described-bystring-Forwarded verbatim onto the control (React aria-describedby).
input-classstring-Extra classes on the control (React className).
classstring-Extra classes on the .field wrapper (React fieldClassName).