Skip to content
Home

CountryCode

Info
Demos
Properties
Events

Description

Field.CountryCode is a wrapper component for the autocomplete component, with options built in for selecting a country code.

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

Demos

Empty

Code Editor
<Field.CountryCode

  onFocus={(value) => console.log('onFocus', value)}

  onBlur={(value) => console.log('onBlur', value)}

  onChange={(value) => console.log('onChange', value)}

/>

Placeholder

Code Editor
<Field.CountryCode

  placeholder="Code?"

  onChange={(value) => console.log('onChange', value)}

/>

Label

Code Editor
<Field.CountryCode

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

/>

Option selected

Code Editor
<Field.CountryCode

  value="+47"

  onChange={(value) => console.log('onChange', value)}

/>

Label and option selected

Code Editor
<Field.CountryCode

  value="+46"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

/>

With help

Code Editor
<Field.CountryCode

  value="+45"

  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)}

/>

Horizontal layout

Code Editor
<Field.CountryCode

  layout="horizontal"

  value="+45"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

/>

Widths

Code Editor
<Field.CountryCode

  value="+45"

  label="Default width (prop omitted"

  onChange={(value) => console.log('onChange', value)}

/>

<Field.CountryCode

  value="+45"

  label="Small"

  width="small"

  onChange={(value) => console.log('onChange', value)}

/>

<Field.CountryCode

  value="+45"

  label="Medium"

  width="medium"

  onChange={(value) => console.log('onChange', value)}

/>

<Field.CountryCode

  value="+45"

  label="Large"

  width="large"

  onChange={(value) => console.log('onChange', value)}

/>

<Field.CountryCode

  value="+45"

  label="Stretch"

  width="stretch"

  onChange={(value) => console.log('onChange', value)}

/>

Disabled

Code Editor
<Field.CountryCode

  value="+44"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  disabled

/>

Error

This is what is wrong...
Code Editor
<Field.CountryCode

  value="+43"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new FormError('This is what is wrong...')}

/>

Validation - Required

Code Editor
<Field.CountryCode

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  required

  validateInitially

  validateUnchanged

/>