Demos
Empty
Code Editor
<Field.PhoneNumber onFocus={(value) => console.log('onFocus', value)} onBlur={(value) => console.log('onBlur', value)} onChange={(value) => console.log('onChange', value)} onCountryCodeChange={(countryCode) => console.log('onCountryCodeChange', countryCode) } onNumberChange={(phoneNumber) => console.log('onNumberChange', phoneNumber) } />
Placeholder
Code Editor
<Field.PhoneNumber placeholder="Call this number" onChange={(value) => console.log('onChange', value)} />
Label
Code Editor
<Field.PhoneNumber label="Label text" onChange={(value) => console.log('onChange', value)} />
Label and value
Code Editor
<Field.PhoneNumber label="Label text" value="+47 98765432" onChange={(value) => console.log('onChange', value)} />
Disabled
Code Editor
<Field.PhoneNumber value="+47 12345678" label="Label text" onChange={(value) => console.log('onChange', value)} disabled />
Error
This is what is wrong...
Code Editor
<Field.PhoneNumber value="007" label="Label text" onChange={(value) => console.log('onChange', value)} error={new FormError('This is what is wrong...')} />
Validation - Required
Code Editor
<Field.PhoneNumber value="+47 888" label="Label text" onChange={(value) => console.log('onChange', value)} required />