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