Skip to content
Home

PostalCodeAndCity

Info
Demos
Properties
Events

Description

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

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