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
/>