Playbook Design System

Default

NOTE: Error state is handled by default, validating length (too long or too short) relative to the selected country’s phone format and enforcing numeric-only values for all countries.

Code Example

Close

import React from 'react'
import { PhoneNumberInput } from '../../'

const PhoneNumberInputDefault = (props) => (
    <>
        <PhoneNumberInput
            id='default'
            {...props} />
    </>
)

export default PhoneNumberInputDefault

Preferred Countries

Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.

Code Example

Close

import React from 'react'
import { PhoneNumberInput } from '../../'

const PhoneNumberInputPreferredCountries = (props) => (
  <>
    <PhoneNumberInput
        id='preferred'
        preferredCountries={['us', 'br', 'ph', 'gb']}
        {...props} 
    />
  </>
)

export default PhoneNumberInputPreferredCountries

Initial Country

Setting an initial country preselects that country within the input as well as the country dropdown.

Code Example

Close

import React from 'react'
import { PhoneNumberInput } from '../../'

const PhoneNumberInitialCountry = (props) => (
    <>
        <PhoneNumberInput
            id='initial'
            initialCountry='br'
            {...props}
        />
    </>
)

export default PhoneNumberInitialCountry

Limited Countries

Limiting countries removes all countries from the dropdown except your selections.

Code Example

Close

import React from 'react'
import { PhoneNumberInput } from '../../'

const PhoneNumberInputOnlyCountries = (props) => (
  <>
    <PhoneNumberInput
        id='only'
        onlyCountries={['us', 'br']}
        {...props} 
    />
  </>
)

export default PhoneNumberInputOnlyCountries

Phone Number Input