Skip to content

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