Skip to content
Home

NationalIdentityNumber

Info
Demos
Properties
Events

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',
    content: '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 Error('This is what is wrong...')}
/>

Validation - Required

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

Validation - Norwegian national identity numbers

It validates Norwegian national identity numbers(fnr) using the fnrvalidator.

Below is an example of the error message displayed when there's an invalid Norwegian national identity number(fnr):

Code Editor
<Field.NationalIdentityNumber value="29020112345" validateInitially />

Validation - D numbers

It validates D numbers using the fnrvalidator.

Below is an example of the error message displayed when there's an invalid D number(a D number has its first number in the identification number increased by 4):

Code Editor
<Field.NationalIdentityNumber value="69020112345" validateInitially />

Validation function

You can provide your own validation function, either to onChangeValidator or onBlurValidator.

Code Editor
const fnr = (value: string) =>
  value.length >= 11
    ? {
        status: 'valid',
      }
    : {
        status: 'invalid',
      }
render(
  <Field.NationalIdentityNumber
    required
    value="123"
    onBlurValidator={(value) => {
      const result = fnr(value)
      return result.status === 'invalid'
        ? new FormError('Field.errorPattern')
        : undefined
    }}
    validateInitially
  />,
)

Extend validation with custom validation function

You can extend the existing validations(dnrValidator, fnrValidator, dnrAndFnrValidator, and make your own age validator by using the createMinimumAgeValidator function) with your own validation function.

Code Editor
const bornInAprilValidator = (value: string) => {
  if (value.substring(2, 4) !== '04') {
    return new Error('Not born in April')
  }
}
const myValidator = (value, { validators }) => {
  const { dnrAndFnrValidator } = validators
  return [dnrAndFnrValidator, bornInAprilValidator]
}
render(
  <Field.NationalIdentityNumber
    required
    value="53050129159"
    onBlurValidator={myValidator}
    validateInitially
  />,
)

Extend validation with adult validator

You can extend the existing validations(dnrValidator, fnrValidator, and dnrAndFnrValidator) with your own age validator, by using the createMinimumAgeValidator function.

Code Editor
const adultValidator = createMinimumAgeValidator(18)
const myAdultValidator = (value, { validators }) => {
  const { dnrAndFnrValidator } = validators
  return [dnrAndFnrValidator, adultValidator]
}
render(
  <Field.NationalIdentityNumber
    required
    value="56052459244"
    onBlurValidator={myAdultValidator}
    validateInitially
  />,
)

Validate only national identity numbers(fnr) above 18 years old

Code Editor
const adultValidator = createMinimumAgeValidator(18)
const myFnrAdultValidator = (value, { validators }) => {
  const { fnrValidator } = validators
  return [fnrValidator, adultValidator]
}
render(
  <Field.NationalIdentityNumber
    required
    value="49100651997"
    onBlurValidator={myFnrAdultValidator}
    validateInitially
  />,
)