Skip to main content

International phone number value

International phone number value in Storybook

Examples​

Check out the Usage section for details about how to design a phone number value properly, and the different configuration options we provide.

Basic example​

You can give the value property an object of the form { phoneNumber: string } and it will render it as a phone number. It will add a country code depending on your locale and apply other formatting required.

<PhoneNumberValue value={{ phoneNumber: "555-123456" }} />

Country code example​

You can specify a country code to add to the number by including a countryCode property in the object used as the value.

This property takes an object like { code: string } where the string is a valid ISO country code.

<PhoneNumberValue value={{ 
  countryCode: { code: "IE" },
  phoneNumber: "01-123456" // Note this is rendered with the leading 0 removed due to the presence of an Irish country code
  }} />

Default country code example​

With the defaultCountryCode property, you can specify a default country code to use instead of the one based on your locale.

<PhoneNumberValue 
  value={{ phoneNumber: "01-123456" }} 
  defaultCountryCode="IE"
  />

Hide country code example​

You can display a phone number without the country code by setting showCountryCodeForReadOnly to false.

<PhoneNumberValue 
  value={{ phoneNumber: "555-123456" }} 
  showCountryCodeForReadOnly={ false }
  />

String value example​

You can use a string value but you must also set dataType to false.

<PhoneNumberValue 
  value="555-123456"
  dataType='string'
  />