Skip to content
Home

SelectCountry

Info
Demos
Properties

Import

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

Description

Value.SelectCountry will render the selected country name by value's ISO code (ISO 3166-1 alpha-2 code). It displays the country name in the current locale. If the value provided is not a valid/supported ISO code, it displays the value.

There is a corresponding Field.SelectCountry component.

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.SelectCountry path="/country" />)

Relevant links

The useCountry hook

You can use the Value.SelectCountry.useCountry hook to get the country name by ISO code (ISO 3166-1 alpha-2 code). It returns the country name in the current locale.

import { Value } from '@dnb/eufemia/extensions/forms'


const MyComponent = () => {
  const { getCountryNameByIso } = Value.SelectCountry.useCountry('NO')
}

Demos

Interactive

LandNorge
Code Editor
<Form.Handler
  data={{
    myCountry: 'NO',
  }}
>
  <Flex.Stack>
    <Field.SelectCountry path="/myCountry" />
    <Value.SelectCountry path="/myCountry" />
  </Flex.Stack>
</Form.Handler>

Placeholder

LandNo value given
Code Editor
<Value.SelectCountry placeholder="No value given" />

Value

LandNorge
Code Editor
<Value.SelectCountry value="NO" />

Use different locale

CountrySwitzerland
Code Editor
<Form.Handler
  locale="en-GB"
  data={{
    myCountry: 'CH',
  }}
>
  <Value.SelectCountry path="/myCountry" />
</Form.Handler>

Label

Label text
Code Editor
<Value.SelectCountry label="Label text" showEmpty />

Label and value

Label textNorge
Code Editor
<Value.SelectCountry label="Label text" value="NO" />

Inline

This is before the component Norge This is after the component

Code Editor
<P>
  This is before the component <Value.SelectCountry value="NO" inline />{' '}
  This is after the component
</P>