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),

  }}

/>

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,

  }}

/>