Skip to content
Home

Address

Info
Demos
Properties
Events

Import

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

Description

Field.Address is a wrapper component for the input of strings, with user experience tailored for postal and street addresses.

There is a corresponding Value.Address component.

Relevant links

Characteristics

  • If the user enters an address with a space, the space is removed.
  • autocomplete is by default set to street-address, but can be customized to using a grouping identifier like so billing street-address, see mdn docs.
  • inputmode is by default set to text.

Postal address

Is for locations for receiving mail, for people or businesses. This can also be used as a postbox address.

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

Street address

Is for physical locations of people or businesses.

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

Demos

Postal address

Code Editor
<Field.Address.Postal
  onChange={(value) => console.log('onChange', value)}
/>

Street address

Code Editor
<Field.Address.Street
  onChange={(value) => console.log('onChange', value)}
/>

Placeholder

Code Editor
<Field.Address.Postal
  placeholder="Enter address..."
  onChange={(value) => console.log('onChange', value)}
/>

Label

Code Editor
<Field.Address.Postal
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
/>

Label and value

Code Editor
<Field.Address.Postal
  label="Label text"
  value="Dronning Eufemias gate 30"
  onChange={(value) => console.log('onChange', value)}
/>

With help

Code Editor
<Field.Address.Postal
  label="Label text"
  value="Dronning Eufemias gate 30"
  help={{
    title: 'Help is available',
    content:
      'Use your gifts to teach and help others. Acknowledge them as gifts (even if only in your mind). Take some time to list your strengths as well as the ways in which you could share them with the world around you and how that truly is a gift to others.',
  }}
  onChange={(value) => console.log('onChange', value)}
/>

Disabled

Code Editor
<Field.Address.Postal
  value="Dronning Eufemias gate 30"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Error message

This is what is wrong...
Code Editor
<Field.Address.Postal
  value="Dronning Eufemias gate X"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Validation - Required

Code Editor
<Field.Address.Postal
  value="Dronning Eufemias gate 30"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  required
/>