Skip to content

Email

Description

Value.Email is a wrapper component for displaying string values, with user experience tailored for email values.

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

Demos

Empty

Code Editor
<Value.Email showEmpty />

Placeholder

The value was not filled in
Code Editor
<Value.Email placeholder="The value was not filled in" />

Value

firstname.lastname@domain.com
Code Editor
<Value.Email value="firstname.lastname@domain.com" />

Label

Code Editor
<Value.Email label="Label text" showEmpty />

Label and value

firstname.lastname@domain.com
Code Editor
<Value.Email label="Label text" value="firstname.lastname@domain.com" />

Inline

This is before the componentfirstname.lastname@domain.comThis is after the component

Code Editor
<P>
  This is before the component
  <Value.Email value="firstname.lastname@domain.com" inline />
  This is after the component
</P>