Skip to content
Home

Email

Info
Demos
Properties
Events

Description

Field.Email is a wrapper component for the input of strings, with user experience tailored for email values.

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

There is a corresponding Value.Email component.

Demos

Empty

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

Placeholder

<Field.Email

  placeholder="Enter email address..."

  onChange={(value) => console.log('onChange', value)}

/>

Label

<Field.Email

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

/>

Label and value

<Field.Email

  label="Label text"

  value="my-m@il.com"

  onChange={(value) => console.log('onChange', value)}

/>

With help

<Field.Email

  label="Label text"

  value="my-m@il.com"

  help={{

    title: 'Help is available',

    contents:

      '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.Email

  value="my-m@il.com"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  disabled

/>

Invalid syntax

<Field.Email

  value="Not a mail"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  validateInitially

/>

Error message

This is what is wrong...
<Field.Email

  value="foo@bar.com"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new FormError('This is what is wrong...')}

/>

Validation - Required

<Field.Email

  value="my-m@il.com"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  required

/>