Skip to content
Home

Email

Info
Demos
Properties
Events

Import

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

Description

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

It supports the HTML autocomplete attribute, and by default set it to email.

There is a corresponding Value.Email component.

Relevant links

Characteristics

  • If the user enters an email with a space, the space is removed.
  • Only valid characters are allowed.
  • autocomplete is set to email.
  • inputmode is set to email.

Demos

Empty

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

Placeholder

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

Label

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

Label and value

Code Editor
<Field.Email
  label="Label text"
  value="my-m@il.com"
  onChange={(value) => console.log('onChange', value)}
/>

With help

Code Editor
<Field.Email
  label="Label text"
  value="my-m@il.com"
  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.Email
  value="my-m@il.com"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Invalid syntax

Code Editor
<Field.Email
  value="Not a mail"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  validateInitially
/>

Error message

This is what is wrong...
Code Editor
<Field.Email
  value="foo@bar.com"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Validation - Required

Code Editor
<Field.Email
  value="my-m@il.com"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  required
/>

Asynchronous on blur validator

Code Editor
async function mockAsyncValidator(value) {
  const request = createRequest()
  console.log('making API request to validate:', value)
  await request(3000) // Simulate a request
  console.log('API request finished')

  // Randomly validates or invalidates
  const validation = Math.random() < 0.5
  console.log('API request finished and validated to:', validation)
  if (validation) {
    return Error('This email is not valid!')
  }
}
render(
  <Form.Handler>
    <Form.Card>
      <Field.Email
        value="foo@bar.com"
        onBlurValidator={mockAsyncValidator}
      />
    </Form.Card>

    <Form.SubmitButton />
  </Form.Handler>,
)