Skip to content
Home

NationalIdentityNumber

Info
Demos
Properties
Events

Description

Field.NationalIdentityNumber is a wrapper component for the input of strings, with user experience tailored for national identity number values.

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

There is a corresponding Value.NationalIdentityNumber component.

Demos

Empty

Code Editor
<Field.NationalIdentityNumber

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

/>

Omit mask

Code Editor
<Field.NationalIdentityNumber

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

  omitMask

/>

Placeholder

Code Editor
<Field.NationalIdentityNumber

  placeholder="Enter 11 digits..."

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

/>

Label

Code Editor
<Field.NationalIdentityNumber

  label="Label text"

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

/>

Label and value

Code Editor
<Field.NationalIdentityNumber

  label="Label text"

  value="01017501234"

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

/>

With help

Code Editor
<Field.NationalIdentityNumber

  label="Label text"

  value="01017501234"

  help={{

    title: 'Help is available',

    contents: 'The more I help others to succeed, the more I succeed.',

  }}

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

/>

Disabled

Code Editor
<Field.NationalIdentityNumber

  value="01010101010"

  label="Label text"

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

  disabled

/>

Error

This is what is wrong...
Code Editor
<Field.NationalIdentityNumber

  value="007"

  label="Label text"

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

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

/>

Validation - Required

Code Editor
<Field.NationalIdentityNumber

  value="12345678901"

  label="Label text"

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

  required

/>