Phone Input Component

The Phone Input component provides a modern, user-friendly interface for collecting phone numbers. It features automatic formatting, area code selection, and validation to ensure proper phone number entry.

Key Features

Automatic Formatting: Real-time formatting as users type
Area Code Selection: Built-in country code selection
Input Validation: Real-time validation with error messages
Paste and Autofill: Gracefully handles pasting and browser autofill
Form Integration: Seamless integration with form data

Basic Usage

Create a simple phone input field:

Phone Number

1
<PhoneInput
2
    label="Phone Number"
3
    name="phone"
4
/>

Variants

sizes

Small

Medium

Large

Required Phone Number

Contact Number *

With Sublabel

Phone Number

We'll use this to send you important updates

Phone Input Functions API

The phone input component provides several functions to interact with programmatically:

Function	Type	Description
get: value	() => string	Gets the complete phone number with area code
set: value	(value: string) => void	Sets the phone number value
get: areaCode	() => string	Gets the currently selected area code
set: areaCode	(code: string) => void	Sets the area code
set: required	(required: boolean) => void	Sets whether the input is required

Phone Input Component Props API

Phone Input Component Props Extends ComponentProps<typeof Input>
Prop	Type	Description
label	string	Label text for the input
sublabel	string	Additional text below the input
wrapperProps	HTMLAttributesWithData<"div">	Props for the wrapper div
areaCodeProps	ComponentProps<typeof Select>	Props for the area code select

Validation

The phone input component automatically validates the entered phone number and displays error messages when:

The number format is invalid (must match XXX-XXX-XXXX pattern)
Required field is empty
Area code is missing when required

Phone Number (with validation) *

Value Format

The phone input component handles various phone number formats:

Automatically formats as user types: XXX-XXX-XXXX
Stores complete number with area code: +1234567890
Strips non-numeric characters for processing
Supports international format with ’+’ prefix

1
// Setting a phone number value
2
phoneInput.value = '+12345678900';
3

4
// Getting the formatted value
5

6
const number = phoneInput.value; // Returns: "+12345678900"
7

8
// The displayed value will be formatted as: 234-567-8900

Limited Time Launch Sale

Add professional phone number input to your forms with our Phone Input component.

GET 60% OFF!

Pagination Pop Banner

Directory