--- title: 'Field.SelectCountry' description: '`Field.SelectCountry` is a wrapper component for the selection component, with options built in for selecting a country.' version: 11.3.0 generatedAt: 2026-05-19T08:46:52.985Z checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40 --- # Field.SelectCountry ## Import ```tsx import { Field } from '@dnb/eufemia/extensions/forms' render() ``` ## Description `Field.SelectCountry` is a wrapper component for [Field.Selection](/uilib/extensions/forms/base-fields/Selection), with options built in for selecting a country. [The list of available countries to select](/uilib/extensions/forms/feature-fields/SelectCountry/properties/#list-of-available-countries) is carefully curated to meet the demands we know today. When selecting a country, the value returned is the selected country's [ISO 3166-1 alpha-2 code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) (country code) like `NO` for Norway. It supports the HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute, and by default set it to `country-name`. There is a corresponding [Value.SelectCountry](/uilib/extensions/forms/Value/SelectCountry) component. ## Relevant links - [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry) - [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/SelectCountry) ## Support for locales like `sv-SE` and `da-DK` In addition to the default support for `nb-NO` and `en-GB`, you can also use the `sv-SE` and `da-DK` locales to display country names in Swedish or Danish. Learn more about [importing additional locales](/uilib/usage/customisation/localization/#eufemia-forms). ### Filter or prioritize country listing You can filter countries with the `countries` property's values `Scandinavia`, `Nordic` or `Europe`. Countries are sorted in alphabetically order, with the following prioritized countries on top of the list: - Norway - Sweden - Denmark - Finland ```jsx import { Field } from '@dnb/eufemia/extensions/forms' render() ``` ### TransformIn and TransformOut You can use the `transformIn` and `transformOut` to transform the value before it gets displayed in the field and before it gets sent to the form context. The second parameter is the country object. You may have a look at the demo below to see how it works. ```tsx import type { CountryType } from '@dnb/eufemia/extensions/forms/Field/SelectCountry' // From the Field (internal value) to the data context or event parameter const transformOut = (internal: string, country: CountryType) => { if (internal) { return `${country.name} (${internal})` } } // To the Field (from e.g. defaultValue) const transformIn = (external: unknown) => { return String(external).match(/\((.*)\)/)?.[1] || 'NO' } ``` ### onFocus, onBlur, onChange These events have an additional parameter with the country object. ```tsx const onFocus = (value, country) => {} ``` ### The country object ```ts { cdc: '47', iso: 'NO', name: 'Norge', i18n: { en: 'Norway', nb: 'Norge' }, regions: ['Scandinavia', 'Nordic'], continent: 'Europe', } ``` ## Demos ### Option selected ```tsx render( console.log('onChange', value, obj)} /> ) ``` ### With a horizontal layout ```tsx render( ) ``` ### With help ```tsx render( console.log('onChange', value, obj)} /> ) ``` ### Disabled ```tsx render( console.log('onChange', value, obj)} disabled /> ) ``` ### Error ```tsx render( console.log('onChange', value, obj)} error={new Error('This is what is wrong...')} /> ) ``` ### Validation - Required ```tsx render( console.log('onChange', value, obj)} required validateInitially validateUnchanged /> ) ``` ### TransformIn and TransformOut ```tsx // From the Field (internal value) to the data context or event parameter const transformOut = (value, country) => { if (value) { return country } } // To the Field (from e.g. defaultValue) // To the Field (from e.g. defaultValue) const transformIn = (country) => { return country?.iso } const MyForm = () => { return ( Data Context ) } render() ``` ### Filter countries This example demonstrates how to filter specific countries. Use the `countries` property to define a set of countries and/or the `filterCountries` property to apply custom filtering logic. ```tsx render( iso !== 'DK'} /> ) ``` ```tsx render( ) ``` ### Field-specific properties ```json { "props": { "countries": { "doc": "List only a certain set of countries: `Scandinavia`, `Nordic`, `Europe` or `Prioritized`(all countries [sorted by priority](/uilib/extensions/forms/feature-fields/SelectCountry/#filter-or-prioritize-country-listing)). Defaults to `Prioritized`.", "type": [ "\"Scandinavia\"", "\"Nordic\"", "\"Europe\"", "\"Prioritized\"" ], "status": "optional" }, "filterCountries": { "doc": "Use this property to filter out certain countries. The function receives the country object and should return a boolean. Returning `false` will omit the country.", "type": "function", "status": "optional" }, "size": { "doc": "Define the height of the Autocomplete. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).", "type": ["\"small\"", "\"default\"", "\"medium\"", "\"large\""], "status": "optional" } } } ``` ### General properties ```json { "props": { "value": { "doc": "Source data value for the field. Will take precedence over the path value given in the data context.", "type": "{valueType}", "status": "optional" }, "defaultValue": { "doc": "Default source data value for the field. Will not take precedence over the path value given in the data context.", "type": "{valueType}", "status": "optional" }, "path": { "doc": "JSON Pointer for where the data for the field is located in the source dataset (when using Form.Handler or DataContext). The `path` will also be set as the `name` attribute for the [string](/uilib/extensions/forms/base-fields/String/)-field.", "type": "string", "status": "optional" }, "info": { "doc": "Info message shown below / after the field by default. Use `statusPosition=\"above\"` to show status messages above the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with `{ conditionally, getValueByPath, getFieldByPath }`. To show the message first after the user has interacted with the field, you can call and return `conditionally` function with a callback and with options: `conditionally(() => 'Your message', { showInitially: true })`.", "type": ["React.ReactNode", "Array", "function"], "status": "optional" }, "warning": { "doc": "Warning message shown below / after the field by default. Use `statusPosition=\"above\"` to show status messages above the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with `{ conditionally, getValueByPath, getFieldByPath }`. To show the message first after the user has interacted with the field, you can call and return `conditionally` function with a callback and with options: `conditionally(() => 'Your message', { showInitially: true })`.", "type": ["React.ReactNode", "Array", "function"], "status": "optional" }, "error": { "doc": "Error message shown below / after the field. When provided as a function, the function will be called with the current value as argument. The second parameter is an object with `{ conditionally, getValueByPath, getFieldByPath }`. To show the message first after the user has interacted with the field, you can call and return `conditionally` function with a callback and with options: `conditionally(() => 'Your message', { showInitially: true })`.", "type": [ "Error", "FormError", "Array", "function" ], "status": "optional" }, "disabled": { "doc": "Set `true` to show the field but without the possibility of changing the value.", "type": "boolean", "status": "optional" }, "emptyValue": { "doc": "The value to use (in `onChange` events etc) when emptying the field. Makes it possible for instance to provide `undefined` instead of an empty string when clearing the content of a text input.", "type": ["{valueType}", "undefined"], "status": "optional" }, "required": { "doc": "When set to `true`, the field will give an error if the value fails the required validation. When set to `false`, the field will not be required, but will add a \"(optional)\" suffix to the label.", "type": "boolean", "status": "optional" }, "labelSuffix": { "doc": "Will append an additional text to the label, like \"(optional)\". When using `inheritLabel`, the suffix will not be inherited. **NB:** The visual appearance of the `labelSuffix` may change in the future.", "type": "React.ReactNode", "status": "optional" }, "schema": { "doc": "Custom JSON Schema for validating the value.", "type": "object", "status": "optional" }, "validateInitially": { "doc": "Set to `true` to show validation based errors initially (from given value-property or source data) before the user interacts with the field.", "type": "boolean", "status": "optional" }, "validateUnchanged": { "doc": "Set to `true` to show validation based errors when the field is touched (like focusing a field and blurring) without having changed the value. Since the user did not introduce a new error, this will apply when the value was initially invalid based on validation.", "type": "boolean", "status": "optional" }, "validateContinuously": { "doc": "Set to `true` to show validation based errors continuously while writing, not just when blurring the field.", "type": "boolean", "status": "optional" }, "errorMessages": { "doc": "Custom error messages for each type of error, overriding default messages. The messages can be a `React.ReactNode` or a string.", "type": "object", "status": "optional" }, "onChangeValidator": { "doc": "Custom validator function where you can return `undefined`, `Error`, `FormError` or an Array with either several other validators or several `Error` or `FormError`. It is triggered on every change done by the user. The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }.", "type": "function", "status": "optional" }, "onBlurValidator": { "doc": "Custom validator function where you can return `undefined`, `Error`, `FormError` or an Array with either several other validators or several `Error` or `FormError`. It is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }.", "type": "function", "status": "optional" }, "transformIn": { "doc": "Transforms the `value` before it's displayed in the field (e.g. input).", "type": "function", "status": "optional" }, "transformOut": { "doc": "Transforms the value before it gets forwarded to the form data object (context) or returned as the `onChange` value parameter. The first parameter is the internal value. Some fields do support a second parameter, like the SelectCountry, where the country object is given.", "type": "function", "status": "optional" }, "label": { "doc": "Label text displayed above the field. Most fields already have a default label, so check the field translations for an existing label entry. Only set `label` when you need to override the default.", "type": "string", "status": "optional" }, "labelDescription": { "doc": "A more discreet text displayed beside the label (i.e. for \"(optional)\").", "type": "string", "status": "optional" }, "labelDescriptionInline": { "doc": "If `true`, the `labelDescription` will be displayed on the same line as the label.", "type": "boolean", "status": "optional" }, "labelSrOnly": { "doc": "Use `true` to make the label only readable by screen readers.", "type": "boolean", "status": "optional" }, "labelSize": { "doc": "Define the font-size of the label based on the [font-size](/uilib/typography/font-size/) table.", "type": ["\"medium\"", "\"large\""], "status": "optional" }, "help": { "doc": "Provide help content for the field using `title` and `content` as a string or `React.ReactNode`. Additionally, you can set `open` to `true` to display the inline help, set the `breakout` property to `false` to disable the breakout of the inline help content, set `outset` to `false` to display the help text inline (inset) instead of the default outset behavior, or use `renderAs` set to `dialog` to render the content in a [Dialog](/uilib/components/dialog/) (recommended for larger amounts of content).", "type": "object", "status": "optional" }, "hideHelpButton": { "doc": "Set `true` when you render the inline help button outside the label (e.g. inside a checkbox suffix) so FieldBlock skips drawing the default label help button.", "type": "boolean", "status": "optional" }, "statusPosition": { "doc": "Controls where status messages (`error`, `warning`, `information`) are visually shown. Use `below` (default) or `above`.", "type": ["\"below\"", "\"above\""], "status": "optional" }, "layout": { "doc": "Layout for the label and input. Can be `horizontal` or `vertical`.", "type": ["\"horizontal\"", "\"vertical\""], "status": "optional" }, "layoutOptions": { "doc": "Use this to set additional options for the `horizontal` layout, e.g. `{ width: \"medium\" }`. You can also use a custom width `{number}rem`. Instead of a width, you can use a min/max width, e.g. `{ minWidth: \"6rem\", maxWidth: \"12rem\" }`.", "type": "object", "status": "optional" }, "width": { "doc": "Will set the width for the whole block. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.", "type": ["string", "false"], "status": "optional" }, "contentWidth": { "doc": "Will set the width for its contents. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.", "type": ["string", "false"], "status": "optional" }, "[Space](/uilib/layout/space/properties)": { "doc": "Spacing properties like `top` or `bottom` are supported.", "type": ["string", "object"], "status": "optional" } } } ``` ## Translations ```json { "locales": ["da-DK", "en-GB", "nb-NO", "sv-SE"], "entries": { "Field.errorPattern": { "nb-NO": "Du må skrive inn en gyldig verdi.", "en-GB": "You must enter a valid value.", "sv-SE": "Du måste ange ett giltigt värde.", "da-DK": "Du skal indtaste en gyldig værdi." }, "Field.errorRequired": { "nb-NO": "Dette feltet må fylles ut.", "en-GB": "This field is required.", "sv-SE": "Detta fält måste fyllas i.", "da-DK": "Dette felt skal udfyldes." }, "Field.errorSummary": { "nb-NO": "Feil som må rettes:", "en-GB": "Please correct the following errors:", "sv-SE": "Fel som måste åtgärdas:", "da-DK": "Felter der skal rettes:" }, "Field.errorSummaryTitle": { "nb-NO": "Feil som må rettes", "en-GB": "Please correct the following errors", "sv-SE": "Fel som måste åtgärdas", "da-DK": "Felter der skal rettes" }, "Field.optionalLabelSuffix": { "nb-NO": "(valgfritt)", "en-GB": "(optional)", "sv-SE": "(valfritt)", "da-DK": "(valgfrit)" }, "Field.stateSummary": { "nb-NO": "Oppsummering:", "en-GB": "Summary:", "sv-SE": "Sammanfattning:", "da-DK": "Oversigt:" }, "SelectCountry.errorRequired": { "nb-NO": "Du må velge et land fra listen.", "en-GB": "You must select a country from the list.", "sv-SE": "Du måste välja ett land från listan.", "da-DK": "Du skal vælge et land fra listen." }, "SelectCountry.label": { "nb-NO": "Land", "en-GB": "Country", "sv-SE": "Land", "da-DK": "Land" }, "SelectCountry.placeholder": { "nb-NO": "Velg et land", "en-GB": "Select country", "sv-SE": "Välj ett land", "da-DK": "Vælg et land" } } } ``` ## List of available countries [Link to the code of the available countries](https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/extensions/forms/constants/countries.ts#L46). NOTE: This list does not say anything about the order in which they will appear in component `Field.SelectCountry`. And is only meant to easily find which countries that's supported and available to use. | ISO 3166-1 alpha-2 code | en | nb | | ----------------------- | -------------------------------------------- | ------------------------------------------- | | `AF` | Afghanistan | Afghanistan | | `AL` | Albania | Albania | | `DZ` | Algeria | Algerie | | `AS` | American Samoa | Amerikansk Samoa | | `AD` | Andorra | Andorra | | `AO` | Angola | Angola | | `AI` | Anguilla | Anguilla | | `AQ` | Antarctica | Antarktis | | `AG` | Antigua and Barbuda | Antigua og Barbuda | | `AR` | Argentina | Argentina | | `AM` | Armenia | Armenia | | `AW` | Aruba | Aruba | | `AU` | Australia | Australia | | `AT` | Austria | Østerrike | | `AZ` | Azerbaijan | Aserbajdsjan | | `BS` | Bahamas | Bahamas | | `BH` | Bahrain | Bahrain | | `BD` | Bangladesh | Bangladesh | | `BB` | Barbados | Barbados | | `BY` | Belarus | Belarus | | `BE` | Belgium | Belgia | | `BZ` | Belize | Belize | | `BJ` | Benin | Benin | | `BM` | Bermuda | Bermuda | | `BT` | Bhutan | Bhutan | | `BO` | Bolivia | Bolivia | | `BA` | Bosnia and Herzegovina | Bosnia-Hercegovina | | `BW` | Botswana | Botswana | | `BV` | Bouvet Island | Bouvetøya | | `BR` | Brazil | Brasil | | `IO` | British Indian Ocean Territory | Det britiske territoriet i Indiahavet | | `VG` | British Virgin Islands | De britiske Jomfruøyer | | `BN` | Brunei | Brunei | | `BG` | Bulgaria | Bulgaria | | `BF` | Burkina Faso | Burkina Faso | | `BI` | Burundi | Burundi | | `KH` | Cambodia | Kambodsja | | `CM` | Cameroon | Kamerun | | `CA` | Canada | Canada | | `CV` | Cape Verde | Kapp Verde | | `BQ` | Bonaire, Sint Eustatius and Saba | Bonaire, Sint Eustatius og Saba | | `KY` | Cayman Islands | Caymanøyene | | `CF` | Central African Republic | Den sentralafrikanske republikk | | `TD` | Chad | Tsjad | | `CL` | Chile | Chile | | `CN` | China | Kina | | `CX` | Christmas Island | Juleøya | | `CC` | Cocos Islands | Kokosøyene | | `CO` | Colombia | Colombia | | `KM` | Comoros | Komorene | | `CK` | Cook Islands | Cookøyene | | `CR` | Costa Rica | Costa Rica | | `HR` | Croatia | Kroatia | | `CU` | Cuba | Cuba | | `CW` | Curaçao | Curaçao | | `CY` | Cyprus | Kypros | | `CZ` | Czech Republic | Tsjekkia | | `CD` | Congo, the Democratic Republic | Kongo, den demokratiske republikken | | `DK` | Denmark | Danmark | | `DJ` | Djibouti | Djibouti | | `DM` | Dominica | Dominica | | `DO` | Dominican Republic | Den dominikanske republikk | | `TL` | East Timor | Øst-Timor | | `EC` | Ecuador | Ecuador | | `EG` | Egypt | Egypt | | `SV` | El Salvador | El Salvador | | `GQ` | Equatorial Guinea | Ekvatorial-Guinea | | `ER` | Eritrea | Eritrea | | `EE` | Estonia | Estland | | `SZ` | Eswatini | Eswatini | | `ET` | Ethiopia | Etiopia | | `FK` | Falkland Islands | Falklandsøyene | | `FO` | Faroe Islands | Færøyene | | `FJ` | Fiji | Fiji | | `FI` | Finland | Finland | | `FR` | France | Frankrike | | `GF` | French Guiana | Fransk Guyana | | `PF` | French Polynesia | Fransk Polynesia | | `TF` | French Southern and Antarctic Lands | De franske sørterritorier | | `GA` | Gabon | Gabon | | `GM` | Gambia | Gambia | | `GE` | Georgia | Georgia | | `DE` | Germany | Tyskland | | `GH` | Ghana | Ghana | | `GI` | Gibraltar | Gibraltar | | `GR` | Greece | Hellas | | `GL` | Greenland | Grønland | | `GD` | Grenada | Grenada | | `GP` | Guadeloupe | Guadeloupe | | `GU` | Guam | Guam | | `GT` | Guatemala | Guatemala | | `GG` | Guernsey | Guernsey | | `GN` | Guinea | Guinea | | `GW` | Guinea-Bissau | Guinea-Bissau | | `GY` | Guyana | Guyana | | `HT` | Haiti | Haiti | | `HM` | Heard Island and McDonald Islands | Heard- og McDonaldøyene | | `HN` | Honduras | Honduras | | `HK` | Hong Kong | Hongkong | | `HU` | Hungary | Ungarn | | `IS` | Iceland | Island | | `IN` | India | India | | `ID` | Indonesia | Indonesia | | `IR` | Iran | Iran | | `IQ` | Iraq | Irak | | `IE` | Ireland | Irland | | `IM` | Isle of Man | Man | | `IL` | Israel | Israel | | `IT` | Italy | Italia | | `CI` | Ivory Coast | Elfenbenskysten | | `JM` | Jamaica | Jamaica | | `JP` | Japan | Japan | | `JE` | Jersey | Jersey | | `JO` | Jordan | Jordan | | `KZ` | Kazakhstan | Kasakhstan | | `KE` | Kenya | Kenya | | `KI` | Kiribati | Kiribati | | `XK` | Kosovo | Kosovo | | `KW` | Kuwait | Kuwait | | `KG` | Kyrgyzstan | Kirgisistan | | `LA` | Laos | Laos | | `LV` | Latvia | Latvia | | `LB` | Lebanon | Libanon | | `LS` | Lesotho | Lesotho | | `LR` | Liberia | Liberia | | `LY` | Libya | Libya | | `LI` | Liechtenstein | Liechtenstein | | `LT` | Lithuania | Litauen | | `LU` | Luxembourg | Luxembourg | | `MO` | Macao | Macao | | `MG` | Madagascar | Madagaskar | | `MW` | Malawi | Malawi | | `MY` | Malaysia | Malaysia | | `MV` | Maldives | Maldivene | | `ML` | Mali | Mali | | `MT` | Malta | Malta | | `MH` | Marshall Islands | Marshalløyene | | `MQ` | Martinique | Martinique | | `MR` | Mauritania | Mauritania | | `MU` | Mauritius | Mauritius | | `YT` | Mayotte | Mayotte | | `MX` | Mexico | Mexico | | `FM` | Micronesia | Mikronesia | | `MD` | Moldova | Moldova | | `MC` | Monaco | Monaco | | `MN` | Mongolia | Mongolia | | `ME` | Montenegro | Montenegro | | `MS` | Montserrat | Montserrat | | `MA` | Morocco | Marokko | | `MZ` | Mozambique | Mosambik | | `MM` | Myanmar | Myanmar | | `NA` | Namibia | Namibia | | `NR` | Nauru | Nauru | | `NP` | Nepal | Nepal | | `NL` | Netherlands | Nederland | | `NC` | New Caledonia | Ny-Caledonia | | `NZ` | New Zealand | New Zealand | | `NI` | Nicaragua | Nicaragua | | `NE` | Niger | Niger | | `NG` | Nigeria | Nigeria | | `NU` | Niue | Niue | | `NF` | Norfolk Island | Norfolkøya | | `KP` | North Korea | Nord-Korea | | `MK` | North Macedonia | Nord-Makedonia | | `MP` | Northern Mariana Islands | Nord-Marianene | | `NO` | Norway | Norge | | `OM` | Oman | Oman | | `PK` | Pakistan | Pakistan | | `PW` | Palau | Palau | | `PS` | Palestine | Palestina | | `PA` | Panama | Panama | | `PG` | Papua New Guinea | Papua Ny-Guinea | | `PY` | Paraguay | Paraguay | | `PE` | Peru | Peru | | `PH` | Philippines | Filippinene | | `PN` | Pitcairn | Pitcairnøyene | | `PL` | Poland | Polen | | `PT` | Portugal | Portugal | | `PR` | Puerto Rico | Puerto Rico | | `QA` | Qatar | Qatar | | `CG` | Congo, the Republic | Kongo, republikken | | `RE` | Réunion | Réunion | | `RO` | Romania | Romania | | `RU` | Russia | Russland | | `RW` | Rwanda | Rwanda | | `BL` | Saint-Barthélemy | Saint-Barthélemy | | `SH` | Saint Helena, Ascension and Tristan da Cunha | Saint Helena, Ascension og Tristan da Cunha | | `KN` | Saint Kitts and Nevis | Saint Kitts og Nevis | | `LC` | Saint Lucia | Saint Lucia | | `MF` | Saint-Martin (FR) | Saint-Martin (FR) | | `PM` | Saint Pierre and Miquelon | Saint Pierre og Miquelon | | `VC` | Saint Vincent and the Grenadines | Saint Vincent og Grenadinene | | `WS` | Samoa | Samoa | | `SM` | San Marino | San Marino | | `ST` | Sao Tome and Principe | São Tomé og Príncipe | | `SA` | Saudi Arabia | Saudi-Arabia | | `SN` | Senegal | Senegal | | `RS` | Serbia | Serbia | | `SC` | Seychelles | Seychellene | | `SL` | Sierra Leone | Sierra Leone | | `SG` | Singapore | Singapore | | `SX` | Sint Maarten (NL) | Sint Maarten (NL) | | `SK` | Slovakia | Slovakia | | `SI` | Slovenia | Slovenia | | `SB` | Solomon Islands | Salomonøyene | | `SO` | Somalia | Somalia | | `ZA` | South Africa | Sør-Afrika | | `GS` | South Georgia and the South Sandwich Islands | Sør-Georgia og Sør-Sandwichøyene | | `KR` | South Korea | Sør-Korea | | `SS` | South Sudan | Sør-Sudan | | `ES` | Spain | Spania | | `LK` | Sri Lanka | Sri Lanka | | `SD` | Sudan | Sudan | | `SR` | Suriname | Surinam | | `SJ` | Svalbard and Jan Mayen | Svalbard og Jan Mayen | | `SE` | Sweden | Sverige | | `CH` | Switzerland | Sveits | | `SY` | Syria | Syria | | `TW` | Taiwan | Taiwan | | `TJ` | Tajikistan | Tadsjikistan | | `TZ` | Tanzania | Tanzania | | `TH` | Thailand | Thailand | | `TG` | Togo | Togo | | `TK` | Tokelau | Tokelau | | `TO` | Tonga | Tonga | | `TT` | Trinidad and Tobago | Trinidad og Tobago | | `TN` | Tunisia | Tunisia | | `TR` | Turkey | Tyrkia | | `TM` | Turkmenistan | Turkmenistan | | `TC` | Turks and Caicos Islands | Turks- og Caicosøyene | | `TV` | Tuvalu | Tuvalu | | `VI` | Virgin Islands (U.S) | De amerikanske Jomfruøyer | | `UG` | Uganda | Uganda | | `UA` | Ukraine | Ukraina | | `AE` | United Arab Emirates | De forente arabiske emirater | | `GB` | United Kingdom | Storbritannia | | `US` | United States | USA | | `UM` | United States Minor Outlying Islands | USAs ytre småøyer | | `UY` | Uruguay | Uruguay | | `UZ` | Uzbekistan | Usbekistan | | `VU` | Vanuatu | Vanuatu | | `VA` | Vatican | Vatikanstaten | | `VE` | Venezuela | Venezuela | | `VN` | Vietnam | Vietnam | | `WF` | Wallis and Futuna | Wallis og Futuna | | `EH` | Western Sahara | Vest-Sahara | | `YE` | Yemen | Jemen | | `ZM` | Zambia | Zambia | | `ZW` | Zimbabwe | Zimbabwe | | `AX` | Åland Islands | Åland | ## Events ```json { "props": { "onChange": { "doc": "Will be called on value changes made by the user, with the new value as argument. When an `async` function is used, the corresponding [FieldBlock](/uilib/extensions/forms/create-component/FieldBlock/) will show an indicator on the field label. You can return `{ success: 'saved' } as const` to show a success symbol, or an error or an object with these keys `{ info: 'Info message', warning: 'Warning message', error: Error('My error') } as const`. The second parameter is an object that e.g. contains `properties` (all given `Field.*` properties).", "type": "(value?: string, additionalArgs?: object) => void", "status": "optional" }, "onFocus": { "doc": "Will be called when the component gets into focus. Like clicking inside a text input or opening a dropdown. Called with active value as argument. The second parameter is an object that e.g. contains `properties` (all given `Field.*` properties).", "type": "(value?: string, additionalArgs?: object) => void", "status": "optional" }, "onBlur": { "doc": "Will be called when the component stops being in focus. Like when going to next field, or closing a dropdown. Called with active value as argument. The second parameter is an object that e.g. contains `properties` (all given `Field.*` properties).", "type": "(value?: string, additionalArgs?: object) => void", "status": "optional" }, "onStatusChange": { "doc": "Called whenever the status messages (info, warning or error) gets visible or changes. Receives the current `{ info, warning, error }` object.", "type": "({ info?, warning?, error? }: FieldStatus) => void", "status": "optional" } } } ``` ### Details about argument values The event handlers has two arguments. The first one is a `string` containing the `ISO` of the selected country, e.g. `CH`, and the second argument is an object with the properties `cdc`, `continent`, `i18n` and `iso`. ```jsx ( value?: string, // e.g. "CH" additionalArgs?: { i18n: { en: string, // e.g. "Switzerland" nb: string // e.g. "Sveits" }, cdc: string, // e.g. "41" iso: string, // e.g. "CH" continent: string, // e.g. "Europe" name: string, // e.g. "Sveits" regions?: string[] // e.g ["Scandinavia", "Nordic"] } ) => void ```