Skip to content
Home

PostalCodeAndCity

Info
Demos
Properties
Events

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

Amount
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

Amount
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),
  }}
/>

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.

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

Disabled

Label
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',
    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...
Code Editor
<Field.PostalCodeAndCity
  postalCode={{}}
  city={{}}
  error={new Error('This is what is wrong...')}
/>

Validation - Required

Label text
Code Editor
<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.

Code Editor
<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.

Code Editor
<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}$',
      onBlurValidator: undefined,
      mask: [/\d/, /\d/, /\d/, /\d/, /\d/],
      placeholder: '00000',
      width: '5.4rem',
    }}
    city={{
      pattern: '^[a-zA-ZäöüÄÖÜß -]+$',
      width: 'stretch',
    }}
  />
</Form.Handler>