Demos
Empty
Code Editor
<Field.BankAccountNumber onChange={(value) => console.log('onChange', value)} />
Omit mask
Code Editor
<Field.BankAccountNumber onChange={(value) => console.log('onChange', value)} omitMask />
Placeholder
Code Editor
<Field.BankAccountNumber placeholder="Enter 11 digits..." onChange={(value) => console.log('onChange', value)} />
Label
Code Editor
<Field.BankAccountNumber label="Label text" onChange={(value) => console.log('onChange', value)} />
Label and value
Code Editor
<Field.BankAccountNumber label="Label text" value="20001234567" onChange={(value) => console.log('onChange', value)} />
With help
Code Editor
<Field.BankAccountNumber label="Label text" value="20001234567" help={{ title: 'Help is available', contents: 'The real point is that we all need help somewhere along life’s path whether we think we will or not. And, if you are the one giving and helping, just remember this: no matter what happens later, you will always be secure in the fact knowing that you have remained strong and true to assist those that need your help.', }} onChange={(value) => console.log('onChange', value)} />
Disabled
Code Editor
<Field.BankAccountNumber value="20001234567" label="Label text" onChange={(value) => console.log('onChange', value)} disabled />
Error
This is what is wrong...
Code Editor
<Field.BankAccountNumber value="007" label="Label text" onChange={(value) => console.log('onChange', value)} error={new FormError('This is what is wrong...')} />
Validation - Required
Code Editor
<Field.BankAccountNumber value="20001234567" label="Label text" onChange={(value) => console.log('onChange', value)} required />