Skip to content
Home

Name

Info
Demos
Properties

Import

import { Value } from '@dnb/eufemia/extensions/forms'
render(<Value.Name />)
render(<Value.Name.First />)
render(<Value.Name.Last />)
render(<Value.Name.Company />)

Description

Value.Name is a wrapper component for displaying string values, with user experience tailored for personal, like first and last name and company names.

There is a corresponding Field.Name component.

import { Value } from '@dnb/eufemia/extensions/forms'


function MyForm() {
  return (
    <Value.SummaryList>
      <Value.Name />
      <Value.Name.First value="Nora" />
      <Value.Name.Last value="Mørk" />
      <Value.Name.Company value="DNB" />
    </Value.SummaryList>
  )
}

Relevant links

Demos

First name

FornavnNora
Code Editor
<Value.Name.First value="Nora" />

Last name

EtternavnMørk
Code Editor
<Value.Name.Last value="Mørk" />

Company name

FirmanavnDNB
Code Editor
<Value.Name.Company value="DNB" />

Placeholder

EtternavnCustom placeholder
Code Editor
<Value.Name.Last placeholder="Custom placeholder" />

Value composition

FornavnNoraEtternavnMørk
Code Editor
<Value.Composition>
  <Value.Name.First value="Nora" />
  <Value.Name.Last value="Mørk" />
</Value.Composition>

Inline

This is before the component Nora Mørk This is after the component

Code Editor
<Form.Handler
  defaultData={{
    firstName: 'Nora',
    lastName: 'Mørk',
  }}
>
  <P>
    This is before the component{' '}
    <Value.Name.First path="/firstName" inline />{' '}
    <Value.Name.Last path="/lastName" inline /> This is after the component
  </P>
</Form.Handler>