Description:
Input Prefixes is a React component for handling international phone number inputs with country selection functionality.
It combines flag displays, country codes, and phone number formatting into a single, cohesive interface.
Features
- 🏳️ Country selector with flag icons sourced from flagcdn.com for visual recognition
- ⚙️ Built entirely with TailwindCSS and Radix UI without shadcn/ui dependencies
- 🔍 Optional search functionality within the country selector dropdown
- 📱 Responsive design that adapts to different screen sizes and form layouts
- 🌐 Support for custom country lists and filtering options
- 🎨 Extensive customization options for styling both input and container elements
- ⌨️ Full keyboard navigation support for accessibility compliance
- 📋 Standard HTML input attributes support for form integration
Preview
Use Cases
- E-commerce checkout forms requiring international shipping and contact information
- User registration systems for global applications and services
- Customer support platforms collecting contact details from worldwide users
- Business directory applications managing international company listings
- Event registration systems for conferences and webinars with global attendance
How to Use It
1. Install the component along with its required peer dependencies.
npm install react-phone-input-prefixes @radix-ui/react-popover @radix-ui/react-scroll-areaOR
yarn add react-phone-input-prefixes @radix-ui/react-popover @radix-ui/react-scroll-area3. For Next.js applications, you must configure image loading from the flag service. Add the following configuration to your next.config.js file:
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'flagcdn.com',
},
],
},
};
export default nextConfig;4. The simplest implementation requires only the component import and basic props:
import React, { useState } from 'react';
import PhoneInputWithPrefixes from 'react-phone-input-prefixes';
export default function ContactForm() {
const [phone, setPhone] = useState('');
const [countryCode, setCountryCode] = useState('');
const handlePhoneChange = (value, code) => {
setPhone(value);
setCountryCode(code);
console.log(`Phone: ${value}, Country Code: ${code}`);
};
return (
<div className="p-6 max-w-md mx-auto">
<PhoneInputWithPrefixes
value={phone}
onChange={handlePhoneChange}
countryDefault="us"
placeholder="Enter your phone number"
/>
</div>
);
}5. You can customize the component with the following props and styling options:
- value (string, required): The phone number without country code that displays in the input field.
- onChange (function, required): Callback function that receives the phone number value and selected country code when either changes.
- countries (array, optional): Custom list of country objects with iso, code, and name properties to override or extend the default country list.
- onlyCountries (array, optional): Array of ISO country codes that restricts which countries appear in the selector dropdown.
- countryDefault (string, optional): ISO code of the country selected by default when the component loads.
- label (string, optional): Text label displayed above the input field, defaults to “Phone number”.
- placeholder (string, optional): Placeholder text shown inside the input field when empty.
- enableSearch (boolean, optional): Enables search functionality within the country selector dropdown.
- inputProps (object, optional): Additional HTML attributes passed directly to the underlying input element.
- inputStyle (object, optional): Inline CSS styles applied to the phone number input field.
- containerStyle (object, optional): Inline CSS styles applied to the entire component container.
<PhoneInputWithPrefixes
value={phoneNumber}
onChange={(value, code) => handlePhoneUpdate(value, code)}
enableSearch={true}
countryDefault="co"
label="Contact Number"
placeholder="Enter your phone number"
countries={[
{ iso: "us", code: "+1", name: "United States" },
{ iso: "ca", code: "+1", name: "Canada" },
{ iso: "gb", code: "+44", name: "United Kingdom" },
{ iso: "fr", code: "+33", name: "France" },
{ iso: "de", code: "+49", name: "Germany" }
]}
onlyCountries={["us", "ca", "gb", "fr", "de"]}
inputProps={{
name: 'phoneNumber',
required: true,
autoComplete: 'tel',
'aria-label': 'Phone number input'
}}
inputStyle={{
fontSize: '16px',
padding: '12px',
borderRadius: '8px'
}}
containerStyle={{
border: '2px solid #e5e7eb',
borderRadius: '8px',
backgroundColor: '#ffffff'
}}
/>Related Resources
- React Hook Form – Form validation library that pairs well with phone input components for form handling.
- TailwindCSS – Utility-first CSS framework used for styling the component and required for proper appearance.
- React Phone Number Input – Alternative phone input library with different feature sets and styling approaches.
FAQs
Q: Can I use this component with form validation libraries?
A: Yes, the component works with popular form libraries like React Hook Form, Formik, and others. Use the inputProps to pass validation attributes and the onChange callback to update your form state.
Q: How do I customize the appearance of country flags?
A: The component uses flag images from flagcdn.com automatically. You can modify the container and input styling through the containerStyle and inputStyle props, but flag images cannot be customized directly.
Q: Does the component support right-to-left languages?
A: The component supports RTL layouts through TailwindCSS classes. You need to add appropriate RTL styling to your container or apply TailwindCSS RTL utilities for complete RTL support.
Q: Can I add custom countries not included in the default list?
A: Yes, use the countries prop to provide a custom array of country objects. Each country object needs iso, code, and name properties to function properly.
Q: Is the search feature case-sensitive?
A: No, the search functionality is case-insensitive and searches through both country names and country codes for better user experience.
