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 } 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]);

    return (
        <form
            action=""
            method="get"
            onSubmit={handleOnSubmit}
        >
            {showFormErrors && (
                <FixedConfirmationToast
                    marginBottom="md"
                    status="error"
                    text={formErrors}
                />
            )}
            <PhoneNumberInput
                error="Missing phone number."
                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

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