Skip to content
Home

Address

Info
Demos
Properties

Import

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

Description

Value.Address is a wrapper component for displaying string values, with user experience tailored for postal and street addresses.

There is a corresponding Field.Address component.

import { Value } from '@dnb/eufemia/extensions/forms'
render(
  <>
    <Value.Address.Postal />
    <Value.Address.Street />
  </>,
)

Relevant links

Demos

Postal address

PostadressePostboks 55 Falkum 3705 Skien
Code Editor
<Value.Address.Postal value="Postboks 55 Falkum 3705 Skien" />

Street address

GateadresseDronning Eufemias gate 30
Code Editor
<Value.Address.Street value="Dronning Eufemias gate 30" />

Placeholder

GateadresseCustom placeholder
Code Editor
<Value.Address.Street placeholder="Custom placeholder" />

Inline

This is before the component Dronning Eufemias gate 30 Postboks 55 Falkum 3705 Skien This is after the component

Code Editor
<Form.Handler
  defaultData={{
    streetAddress: 'Dronning Eufemias gate 30',
    postalAddress: 'Postboks 55 Falkum 3705 Skien',
  }}
>
  <P>
    This is before the component{' '}
    <Value.Address.Street path="/streetAddress" inline />{' '}
    <Value.Address.Postal path="/postalAddress" inline /> This is after the
    component
  </P>
</Form.Handler>