Skip to content
Home

Field.NationalIdentityNumber

Info
Demos
Properties
Events

Demos

Empty

<Field.NationalIdentityNumber
  onChange={(value) => console.log('onChange', value)}
/>

Omit mask

<Field.NationalIdentityNumber
  onChange={(value) => console.log('onChange', value)}
  omitMask
/>

Placeholder

<Field.NationalIdentityNumber
  placeholder="Enter 11 digits..."
  onChange={(value) => console.log('onChange', value)}
/>

Label

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

Label and value

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

With help

<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

<Field.NationalIdentityNumber
  value="01010101010"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Error

This is what is wrong...
<Field.NationalIdentityNumber
  value="007"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Validation - Required

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

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):

<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):

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

Validation function

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

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.

const bornInAprilValidator = (value: string) => {
  if (value.substring(2, 4) !== '04') {
    return new Error('Not born in April')
  }
}
// Keep the default validator while ensuring birth month is April.
const myValidator: NationalIdentityNumberValidator = (
  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.

const adultValidator = createMinimumAgeValidator(18)
// Keep the default validator while adding an age check.
const myAdultValidator: NationalIdentityNumberValidator = (
  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

const adultValidator = createMinimumAgeValidator(18)
// Keep the default validator while ensuring an FNR-based age check.
const myFnrAdultValidator: NationalIdentityNumberValidator = (
  value,
  { validators }
) => {
  const { fnrValidator } = validators ?? {}
  return [fnrValidator, adultValidator]
}
render(
  <Field.NationalIdentityNumber
    required
    value="49100651997"
    onBlurValidator={myFnrAdultValidator}
    validateInitially
  />
)