Skip to content
Home

SelectCountry

Info
Demos
Properties
Events

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

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',
}

Demos

Option selected

Code Editor
<Field.SelectCountry
  value="NO"
  onChange={(value, obj) => console.log('onChange', value, obj)}
/>

With a horizontal layout

Code Editor
<Field.SelectCountry
  value="NO"
  layout="horizontal"
  layoutOptions={{
    width: '6rem',
  }}
/>

With help

Code Editor
<Field.SelectCountry
  value="NO"
  label="Label text"
  help={{
    title: 'Help is available',
    content:
      'Helping others, encouraging others, are often acts of being kind that have more meaning that you may realize.',
  }}
  onChange={(value, obj) => console.log('onChange', value, obj)}
/>

Disabled

Code Editor
<Field.SelectCountry
  value="NO"
  label="Label text"
  onChange={(value, obj) => console.log('onChange', value, obj)}
  disabled
/>

Error

This is what is wrong...
Code Editor
<Field.SelectCountry
  value="NO"
  label="Label text"
  onChange={(value, obj) => console.log('onChange', value, obj)}
  error={new Error('This is what is wrong...')}
/>

Validation - Required

Code Editor
<Field.SelectCountry
  label="Label text"
  onChange={(value, obj) => console.log('onChange', value, obj)}
  required
  validateInitially
  validateUnchanged
/>

TransformIn and TransformOut

Land(Select a country)

Data Context

"undefined" 
Code Editor
// 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)
const transformIn = (country) => {
  return country?.iso
}
const MyForm = () => {
  return (
    <Form.Handler onSubmit={console.log}>
      <Form.Card>
        <Field.SelectCountry
          path="/country"
          transformIn={transformIn}
          transformOut={transformOut}
          defaultValue="NO"
        />

        <Value.SelectCountry
          path="/country"
          transformIn={transformIn}
          placeholder="(Select a country)"
          showEmpty
        />

        <Form.SubHeading>Data Context</Form.SubHeading>
        <Tools.Log />
      </Form.Card>
      <Form.SubmitButton />
    </Form.Handler>
  )
}
render(<MyForm />)

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.

Code Editor
<Field.SelectCountry
  countries="Scandinavia"
  filterCountries={({ iso }) => iso !== 'DK'}
/>