Components

Phone Input

A phone input component that simplifies the phone input.

'use client';

import { PhoneInputBase, PhoneInputFlagMenu, PhoneInputRoot } from '@kit/ui/phone-input';
import { cn } from '@kit/utils';
import React, { useCallback, useState } from 'react';

export function PhoneInputDemo() {
    const [value, setValue] = useState('');

    const handleChange = useCallback(
        (e: React.ChangeEvent<HTMLInputElement>) => {
            setValue(e.target.value);
        },
        [setValue],
    );

    return (
        <PhoneInputRoot value={value || ''} onPhoneInputChange={handleChange}>
            <PhoneInputFlagMenu className="bg-muted/50 focus-visible:bg-background" />
            <PhoneInputBase className={cn('max-w-md', value ? 'bg-muted/50 focus-visible:bg-background' : '')} />
        </PhoneInputRoot>
    );
}

Installation

Install the following dependencies:

We use the light-weight (145kB) libphonenumber-js library for the phone number validation.


pnpm add libphonenumber-js

Copy and paste the following code into your project.

components/ui/phone-input.tsx

'use client';

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@kit/ui/dropdown-menu';
import { Icon } from '@kit/ui/icon';
import { Input } from '@kit/ui/input';
import { ScrollArea } from '@kit/ui/scroll-area';
import { cn } from '@kit/utils';
import parsePhoneNumber, { AsYouType, CountryCallingCode, CountryCode } from 'libphonenumber-js';
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { COUNTRIES, ISO_CODES, MuiTelInputCountry, NUMBER_TO_ISO_CODE } from './model/constants/countries';

Get the Kit

Kit required to see the full code

Update the import paths to match your project setup.

Anatomy

Phone Input component anatomy

Usage

import { PhoneInputRoot, PhoneInputBase, PhoneInputFlagMenu } from '@kit/ui/phone-input';

<PhoneInputRoot value={value || ''} onPhoneInputChange={handleChange}>
    <PhoneInputFlagMenu className="bg-muted/50 focus-visible:bg-background" />
    <PhoneInputBase className={cn('max-w-md', value ? 'bg-muted/50 focus-visible:bg-background' : '')} />
</PhoneInputRoot>

Features

International zip code suggestions
Flag menu
Phone number formatting

API Reference

Root

PhoneInputRootProps

Prop	Type	Default
`value`	`string`
`onPhoneInputChange`	`function`
`defaultNumber`	`string`
`defaultCountryISO`	`CountryCode`	`'FR'`
`className`	`string`

Props: Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'type' | 'role'>

Base

The input component.

Props: React.InputHTMLAttributes<HTMLInputElement>

Number Input

An enhanced number input with keyboard, mouse wheel, and drag controls.

Progression

A progression component to display scroll progress through content.

How is this guide?

Last updated on 1/29/2026