Skip to content
Home

PhoneNumber

Info
Demos
Properties
Events

Description

Field.PhoneNumber is a wrapper component for the input of strings, with user experience tailored for phone number values.

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.PhoneNumber />)

There is a corresponding Value.PhoneNumber component.

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

/>