Skip to content
Home

OrganizationNumber

Info
Demos
Properties
Events

Import

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

Description

Field.OrganizationNumber is a wrapper component for the input of strings, with user experience tailored for organization number values.

This input expects a 9-digit number as its value. This is because Norwegian organization numbers are 9-digits long, based on info from Brønnøysundregisteret It validates input for Norwegian organization numbers as described by Brønnøysundregistrene, and in addition we validate 000 000 000 as invalid. The validation happens on blur, internally using the onBlurValidator property.

There is a corresponding Value.OrganizationNumber component.

Relevant links

Validators

Internal validators exposed

Field.OrganizationNumber expose the organizationNumberValidator validator through its onChangeValidator and onBlurValidator property, take a look at this demo. The organizationNumberValidator validator, validates if the organization number provided is a Norwegian organization number or not.

Demos

Empty

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

Omit mask

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

Placeholder

Code Editor
<Field.OrganizationNumber
  placeholder="Enter 9 digits..."
  onChange={(value) => console.log('onChange', value)}
/>

Label

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

Label and value

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

With help

Code Editor
<Field.OrganizationNumber
  label="Label text"
  value="987654321"
  help={{
    title: 'Help is available',
    content:
      'Success has nothing to do with what you gain in life or accomplish for yourself. It’s what you do for others.',
  }}
  onChange={(value) => console.log('onChange', value)}
/>

Disabled

Code Editor
<Field.OrganizationNumber
  value="989898989"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Error

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

Validation - Required

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

Extend validation with custom validation function

You can extend the existing validation(organizationNumberValidator) with your own validation function.

Code Editor
const firstDigitIs1Validator = (value: string) => {
  if (value.substring(0, 1) !== '1') {
    return new Error('First digit is not 1')
  }
}
const myValidator = (value, { validators }) => {
  const { organizationNumberValidator } = validators
  return [organizationNumberValidator, firstDigitIs1Validator]
}
render(
  <Field.OrganizationNumber
    required
    value="991541209"
    onBlurValidator={myValidator}
    validateInitially
  />,
)