Skip to content
Home

SelectCountry

Info
Demos
Properties
Events

Description

Field.SelectCountry is a wrapper component for the selection component, with options built in for selecting a country. When selecting a country, the value returned is the selected country's ISO 3166-1 alpha-2 code like NO for Norway.

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

It supports the HTML autofill attribute (country-name) if no value is given.

Filter or prioritize country listing

Countries are sorted in alphabetically order. You can filter countries with the countries property or put these countries on top of the list:

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

Demos

Empty

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

Placeholder

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

Label

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

Option selected

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

Label and option selected

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

With help

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

Disabled

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

Error

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

Validation - Required

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