Skip to content

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