Skip to content
Home

Name

Info
Demos
Properties
Events

Import

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

Description

Field.Name is a wrapper component for the input of strings, with user experience tailored for first name, last name and company names.

There is a corresponding Value.Name component.

import { Field, Form } from '@dnb/eufemia/extensions/forms'


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

Relevant links

Characteristics

  • Only letters and characters such as hyphens and spaces are allowed for Field.Name.First and Field.Name.Last (except Field.Name.Company, which can contain characters, letters and numbers, but must consist of at least three letters from the Norwegian alphabet).
  • Trailing spaces are removed.
  • The HTML autocomplete attribute is set to:
    • name by default.
    • given-name and family-name for Field.Name.First and Field.Name.Last.
    • organization-name for Field.Name.Company.

Demos

First name

Code Editor
<Field.Name.First
  value="Nora"
  onChange={(value) => console.log('onChange', value)}
/>

Last name

Code Editor
<Field.Name.Last
  value="Mørk"
  onChange={(value) => console.log('onChange', value)}
/>

Company name

Code Editor
<Field.Name.Company
  value="DNB"
  onChange={(value) => console.log('onChange', value)}
/>

Placeholder

Code Editor
<Field.Name.Last
  placeholder="Custom placeholder"
  onChange={(value) => console.log('onChange', value)}
/>

Field composition

Label text
Code Editor
<Field.Composition width="large">
  <Field.Name.First
    value="Nora"
    onChange={(value) => console.log('onChange', value)}
  />
  <Field.Name.Last
    value="Mørk"
    onChange={(value) => console.log('onChange', value)}
  />
</Field.Composition>

Data Context

Code Editor
<Form.Handler
  defaultData={{
    firstName: 'Nora',
    lastName: 'Mørk',
  }}
  onChange={(value) => console.log('onChange', value)}
>
  <Flex.Stack>
    <Field.Name.First path="/firstName" />
    <Field.Name.Last path="/lastName" />
  </Flex.Stack>
</Form.Handler>

With help

Code Editor
<Field.Name.First
  value="Nora"
  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)}
/>

Invalid syntax

Code Editor
<Field.Name.First
  value="Invalid @ syntax"
  onChange={(value) => console.log('onChange', value)}
  validateInitially
/>

Error message

This is what is wrong...
Code Editor
<Field.Name.First
  value="Nora"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Validation - Required

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