Phone Number Input

Summary

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.

import React from 'react'

import { PhoneNumberInput } from 'playbook-ui'

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

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 in the remaining dropdown.

import React from 'react'

import { PhoneNumberInput } from 'playbook-ui'

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

export default PhoneNumberInputPreferredCountries

Initial Country

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

import React from 'react'

import { PhoneNumberInput } from 'playbook-ui'

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

export default PhoneNumberInitialCountry

Limited Countries

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

import React from 'react'

import { PhoneNumberInput } from 'playbook-ui'

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

export default PhoneNumberInputOnlyCountries

Form Validation

import React, { useEffect, useState } from "react";

import { Button, FixedConfirmationToast, PhoneNumberInput, Icon } from 'playbook-ui'

const PhoneNumberInputValidation = (props) => {
    const [formErrors, setFormErrors] = useState("");
    const [showFormErrors, setShowFormErrors] = useState(false);
    const [phoneNumber, setPhoneNumber] = useState("");
    const [countryCode, setCountryCode] = useState("af");

    const handleOnValidate = (valid) => {
        setFormErrors(
            valid ? "" : "Please correct the fields below and try again."
        );
    };

    const handleOnChange = ({ iso2, number }) => {
        setCountryCode(iso2);
        setPhoneNumber(number);
    };
    
    const handleOnSubmit = (e) => {
        if (showFormErrors) e.preventDefault()
    }

    useEffect(() => {
        setShowFormErrors(formErrors.length > 0);
    }, [formErrors]);

    const error = (
        <>
            <Icon icon="warning" /> Missing phone number.
        </>
    )

    return (
        <form
            action=""
            method="get"
            onSubmit={handleOnSubmit}
        >
            {showFormErrors && (
                <FixedConfirmationToast
                    marginBottom="md"
                    status="error"
                    text={formErrors}
                />
            )}
            <PhoneNumberInput
                error={error}
                id="validation"
                initialCountry={countryCode}
                onChange={handleOnChange}
                onValidate={handleOnValidate}
                required
                value={phoneNumber}
            />
            <Button
                htmlType="submit"
                text="Save Phone Number"
            />
        </form>
    );
};

export default PhoneNumberInputValidation;

Clearing the Input Field

To clear a number inside the input element, create a ref inside your parent component, pass it to the kit's ref prop, and use ref.current.clearField().

clearField() is a custom function inside the kit to clear numbers and the error message while still providing validation.

import React, { useRef } from 'react'

import { Button, PhoneNumberInput } from 'playbook-ui'

const PhoneNumberInputClearField = (props) => {
    // 1. Create a ref - this accesses the kit's input element.
    const ref = useRef()

    // 2. Use clearField() to clear the field.
    const handleClick = () => {
        ref.current.clearField()
    }

    // 3. Pass the ref to the ref prop.
    return (
        <>
            <PhoneNumberInput
                id="clear-field"
                ref={ref}
            />

            <Button
                onClick={handleClick}
                text="Clear the Input Field"
            />
        </>
    )
}

export default PhoneNumberInputClearField

Accessing the Input Element

To access the kit's input element attributes or add event listeners, create a ref inside your parent component, pass it to the kit's ref prop, and use ref.current.inputNode() with your desired attribute or event listener inside a useEffect hook. useEffect is necessary because the ref will be initially undefined. Calling useEffect with an empty dependency array ensures your event listeners won't be added twice.

inputNode() is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the name attribute, use ref.current.inputNode().name

import React, { useEffect, useRef } from 'react'

import { Body, PhoneNumberInput } from 'playbook-ui'

const PhoneNumberInputAccessInputElement = (props) => {
    // 1. Create a ref - this accesses the kit's input element.
    const ref = useRef()

    // 2. Add any event listener to ref.current.inputNode() inside a useEffect hook and trigger it once.
    useEffect(() => {
        ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
    }, [])

    // 3. Pass the ref to the ref prop.
    return (
        <>
            <Body text="Click the input field below:" />
            <PhoneNumberInput
                id="access-input-element"
                ref={ref}
            />
        </>
    )
}

export default PhoneNumberInputAccessInputElement

Format as You Type

NOTE: the number in the React onChange event will not include formatting (no spaces, dashes, and parentheses). For Rails, the value will include formatting and its value must be sanitized manually.

import React, { useState } from "react";

import { Body, PhoneNumberInput } from 'playbook-ui'

const PhoneNumberInputFormat = (props) => {
    const [phoneNumber, setPhoneNumber] = useState("");

    const handleOnChange = ({ number }) => {
        setPhoneNumber(number);
    };

    return (
        <>
            <PhoneNumberInput
                formatAsYouType
                id="format"
                onChange={handleOnChange}
            />
            {phoneNumber && <Body>Unformatted number: {phoneNumber}</Body>}
        </>
    );
};

export default PhoneNumberInputFormat;

Country Search

Set country_search / countrySearch to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.

import React from 'react'

import { PhoneNumberInput } from 'playbook-ui'

const PhoneNumberInputCountrySearch = (props) => (
    <>
        <PhoneNumberInput
            countrySearch
            id='country-search'
        />
        <PhoneNumberInput
            countrySearch
            id='country-search-limited'
            onlyCountries={["br", "us", "ph", "gb"]}
        />
    </>
)

export default PhoneNumberInputCountrySearch

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat