#SelectCountry

#Import

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.SelectCountry />)

#Description

Field.SelectCountry is a wrapper component for Field.Selection, with options built in for selecting a country. The list of available countries to select 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 (country code) like NO for Norway.

It supports the HTML autocomplete attribute, and by default set it to country-name.

There is a corresponding Value.SelectCountry component.

#Relevant links

• Source code
• Docs code

#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.

#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

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.PhoneNumber countries="Prioritized" />)

#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.

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.

const onFocus = (value, country) => {}

#The country object

{
  cdc: '47',
  iso: 'NO',
  name: 'Norge',
  i18n: { en: 'Norway', nb: 'Norge' },
  regions: ['Scandinavia', 'Nordic'],
  continent: 'Europe',
}