Skip to content
Home

Field.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#

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

Street address#

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

Placeholder#

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

Label#

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

Label and value#

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

With help#

<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#

<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...
<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#

<Field.Address.Postal
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  required
  validateInitially
/>
Suggest an edit