Skip to content

Demos#

Empty#

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

Omit mask#

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

Placeholder#

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

Label#

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

Label and value#

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

With help#

<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#

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

Error#

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

Validation - Required#

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

Extend validation with custom validation function#

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

const firstDigitIs1Validator = (value: string) => {
  if (value.substring(0, 1) !== '1') {
    return new Error('First digit is not 1')
  }
}

// Keep the built-in validator while requiring the first digit.
const myValidator: OrganizationNumberValidator = (
  value,
  { validators }
) => {
  const { organizationNumberValidator } = validators
  return [organizationNumberValidator, firstDigitIs1Validator]
}
render(
  <Field.OrganizationNumber
    required
    value="991541209"
    onBlurValidator={myValidator}
    validateInitially
  />
)
Suggest an edit