Skip to content
Home

PostalCodeAndCity

Info
Demos
Properties

Import

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

Description

Value.PostalCodeAndCity is a wrapper component for displaying string values, with user experience tailored for Norwegian postal code and city values.

There is a corresponding Field.PostalCodeAndCity component.

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

Relevant links

Demos

Empty

Postnummer og sted
Code Editor
<Value.PostalCodeAndCity showEmpty />

Placeholder

Postnummer og stedThe value was not filled in
Code Editor
<Value.PostalCodeAndCity placeholder="The value was not filled in" />

Value

Postnummer og sted0010 Oslo
Code Editor
<Value.PostalCodeAndCity value="0010 Oslo" />

Label

Label text
Code Editor
<Value.PostalCodeAndCity label="Label text" showEmpty />

Label and value

Label text0010 Oslo
Code Editor
<Value.PostalCodeAndCity label="Label text" value="0010 Oslo" />

Label and value from the DataContext

Postnummer og sted0010 Oslo
Code Editor
<Form.Handler
  data={{
    myPostalCode: '0010',
    myCity: 'Oslo',
  }}
>
  <Value.PostalCodeAndCity
    postalCode={{
      path: '/myPostalCode',
    }}
    city={{
      path: '/myCity',
    }}
  />
</Form.Handler>

Inline

This is before the component 0010 Oslo This is after the component

Code Editor
<P>
  This is before the component{' '}
  <Value.PostalCodeAndCity value="0010 Oslo" inline /> This is after the
  component
</P>