Skip to content
Home

Field.PostalCodeAndCity

Info
Demos
Properties
Events

Import

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

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 are meant for Norwegian postal codes and cities. The postal code input takes a 4-digit string as values, since it's 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.

It supports the HTML autocomplete attribute, and by default set it to postal-code for the postal code field, and to address-level2 for the city field.

There is a corresponding Value.PostalCodeAndCity component.

Relevant links

Validation and autofill

Read more about how to use the Bring API to validate and autofill a postal code and city name.

For countries that use a four-digit postal code (NO, DK and CH), the placeholder code 0000 is rejected as invalid. This built-in check runs on blur and is applied automatically through the postal code field's onBlurValidator.

To disable it, set postalCode.onBlurValidator to false.

If you provide your own postalCode.onBlurValidator, it replaces the built-in check. You can still keep it by composing the exported postalCodeValidator, which is made available through the second argument of your validator. Import PostalCodeAndCityValidator to type your onBlurValidator and get the typed validators object:

import { Field } from '@dnb/eufemia/extensions/forms'
import type { PostalCodeAndCityValidator } from '@dnb/eufemia/extensions/forms/Field/PostalCodeAndCity'


const myValidator: PostalCodeAndCityValidator = (
  value,
  { validators }
) => {
  const { postalCodeValidator } = validators ?? {}
  const customRule = (value: string) => {
    if (value === '1111') {
      return new Error('This postal code is not allowed.')
    }
  }


  // Keep the built-in validator and add a custom rule.
  return [postalCodeValidator, customRule]
}


render(
  <Field.PostalCodeAndCity postalCode={{ onBlurValidator: myValidator }} />
)

Demos

Empty

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

Placeholder

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

Label

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

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

Iterate over array

By using the itemPath property, you can iterate over an array and use the postalCode and city properties to render the fields.

<Iterate.Array
  value={[
    {
      postalCode: '0788',
      city: 'Oslo',
    },
    {
      postalCode: '0789',
      city: 'Bergen',
    },
  ]}
>
  <Field.PostalCodeAndCity
    postalCode={{
      itemPath: '/postalCode',
    }}
    city={{
      itemPath: '/city',
    }}
  />
</Iterate.Array>

Disabled

<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

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

Error

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

Validation - Required

Label text
<Field.PostalCodeAndCity
  postalCode={{
    required: true,
  }}
  city={{
    required: true,
  }}
/>

Path Based Country

The country property supports a field path as value. This allows you to set the country based on the value of another field.

<Form.Handler>
  <Form.Card>
    <Field.SelectCountry path="/country" defaultValue="NO" />
    <Field.PostalCodeAndCity countryCode="/country" />
  </Form.Card>
</Form.Handler>

Non-Norwegian Postal Codes

If you want to allow for a postal code that is not Norwegian, just set the country property to the desired country, and add your own custom validation.

NB: As of today, setting country property to anything other than NO will only remove the default norwegian postal code pattern, mask, and placeholder, but not actually set the postal code pattern, mask, and placeholder for the value provided to the country property. This functionality will hopefully be implemented in the future.

<Form.Handler
  translations={{
    'nb-NO': {
      'PostalCode.errorPattern':
        'Dette er ikke et gyldig postnummer (fem siffer).',
    },
    'en-GB': {
      'PostalCode.errorPattern':
        'This is not a valid postal code (five-digits).',
    },
  }}
>
  <Field.PostalCodeAndCity
    countryCode="DE"
    postalCode={{
      pattern: '^[0-9]{5}
#x27;,
      onBlurValidator: undefined,
      mask: [/\d/, /\d/, /\d/, /\d/, /\d/],
      placeholder: '00000',
      width: '5.4rem',
    }}
    city={{
      pattern: '^[a-zA-ZäöüÄÖÜß -]+
#x27;,
      width: 'stretch',
    }}
  />
</Form.Handler>
Edit on GitHub