Skip to content
Home

PostalCodeAndCity

Info
Demos
Properties
Events

Description

Field.PostalCodeAndCity is a wrapper component for input of two separate input of strings with user experience tailored for postal code and city values.

These fields is meant for Norwegian postal codes and cities. The postal code input takes a 4-digit string as values, since its meant for norwegian postal codes. A norwegian postal code can have a leading zero, which is why the value is a string and not a number. More info about postal codes can be found at posten.

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

Demos

Empty

Code Editor
<Field.PostalCodeAndCity
  postalCode={{
    onChange: (value) => console.log('postalCode onChange', value),
  }}
  city={{
    onChange: (value) => console.log('city onChange', value),
  }}
/>

Placeholder

Code Editor
<Field.PostalCodeAndCity
  postalCode={{
    placeholder: '????',
    onChange: (value) => console.log('postalCode onChange', value),
  }}
  city={{
    placeholder: 'Your city..',
    onChange: (value) => console.log('city onChange', value),
  }}
/>

Label

Code Editor
<Field.PostalCodeAndCity
  postalCode={{
    label: 'PNR',
    onChange: (value) => console.log('postalCode onChange', value),
  }}
  city={{
    label: 'CTY',
    onChange: (value) => console.log('city onChange', value),
  }}
/>

Label and value

Code Editor
<Field.PostalCodeAndCity
  postalCode={{
    label: 'Pnr.',
    value: '0788',
    onChange: (value) => console.log('postalCode onChange', value),
  }}
  city={{
    value: 'Oslo',
    onChange: (value) => console.log('city onChange', value),
  }}
/>

Disabled

Code Editor
<Field.PostalCodeAndCity
  postalCode={{
    value: '1234',
    disabled: true,
    onChange: (value) => console.log('postalCode onChange', value),
  }}
  city={{
    value: 'Oslo',
    disabled: true,
    onChange: (value) => console.log('city onChange', value),
  }}
/>

With help

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

Error

This is what is wrong...
Code Editor
<Field.PostalCodeAndCity
  postalCode={{}}
  city={{}}
  error={new FormError('This is what is wrong...')}
/>

Validation - Required

Code Editor
<Field.PostalCodeAndCity
  postalCode={{
    required: true,
  }}
  city={{
    required: true,
  }}
/>