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