The input phone component is a text field specifically designed for entering a phone number. It is usually found in forms and mobile apps as a part of registration, verification, or communication processes.
Check out below our Tailwind CSS input phone examples. They come in different styles, allowing you to easily adapt the component to your project needs.
Use this basic phone number input field with a placeholder example and a note to include the country code.
Include your country code for international numbers.
<div class="w-full max-w-sm min-w-[200px]">
<label class="block mb-1 text-sm text-slate-800">
Contact Number
</label>
<input
id="contactNumber"
class="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="e.g., +1 123-456-7890"
pattern="^\+\d{1,3}\s\d{1,4}-\d{1,4}-\d{4}$"
maxlength="16"
/>
<p class="flex items-center mt-2 text-xs text-slate-500">
Include your country code for international numbers.
</p>
</div>
<script>
// Add event listener to the input field
document.getElementById('contactNumber').addEventListener('input', function (e) {
// Replace any non-numeric characters except +, -, and space
e.target.value = e.target.value.replace(/[^+\d\s-]/g, '');
});
</script>Try our tailwind phone input example that displays validation messages below, either confirming the phone number format (green) or indicating an error (red).
Great! Your phone number is valid.
Please match the requested format. e.g., +1 123-456-7890
<div class="w-full max-w-sm min-w-[200px]">
<label class="block mb-1 text-sm text-slate-800">
Contact Number
</label>
<input
id="contactNumber"
class="w-full h-10 bg-transparent placeholder:text-green-500 text-green-700 text-sm border border-green-400 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-green-500 hover:border-green-500 shadow-sm focus:shadow-md"
value="+1 123-456-7890"
maxlength="16"
title="Phone number format: +1 123-456-7890"
placeholder="e.g., +1 123-456-7890"
/>
<p class="flex items-center mt-2 text-xs text-green-500">
Great! Your phone number is valid.
</p>
</div>
<div class="w-full max-w-sm min-w-[200px] mt-5">
<label class="block mb-1 text-sm text-slate-800">
Contact Number
</label>
<input
id="contactNumber2"
class="w-full h-10 bg-transparent placeholder:text-red-500 text-red-700 text-sm border border-red-400 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-red-500 hover:border-red-500 shadow-sm focus:shadow-md"
placeholder="e.g., +1 123-456-7890"
value="+1 123-456-7890"
maxlength="16"
title="Phone number format: +1 123-456-7890"
/>
<p class="flex items-center mt-2 text-xs text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-2 text-red-500">
<path fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
clip-rule="evenodd"></path>
</svg>
Please match the requested format. e.g., +1 123-456-7890
</p>
</div>
<script>
// Add event listener to the input field
document.getElementById('contactNumber').addEventListener('input', function (e) {
// Replace any non-numeric characters except +, -, and space
e.target.value = e.target.value.replace(/[^+\d\s-]/g, '');
});
// Add event listener to the input field
document.getElementById('contactNumber2').addEventListener('input', function (e) {
// Replace any non-numeric characters except +, -, and space
e.target.value = e.target.value.replace(/[^+\d\s-]/g, '');
});
</script>Use this phone input example with a phone icon to the left of the input, adding a visual cue for the type of input required.
Include your country code for international numbers.
<div class="w-full max-w-sm min-w-[200px]">
<label class="block mb-1 text-sm text-slate-800">
Contact Number
</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z" clip-rule="evenodd" />
</svg>
</span>
<input
id="contactNumber"
class="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded pl-10 pr-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="e.g., +1 123-456-7890"
pattern="^\+\d{1,3}\s\d{1,3}-\d{3}-\d{4}$"
title="Phone number must be in the format: +1 123-456-7890"
maxlength="16"
required
/>
</div>
<p class="mt-2 text-xs text-slate-500">
Include your country code for international numbers.
</p>
</div>
<script>
// Add event listener to the input field
document.getElementById('contactNumber').addEventListener('input', function (e) {
// Replace any non-numeric characters except +, -, and space
e.target.value = e.target.value.replace(/[^+\d\s-]/g, '');
});
</script>Use this phone input example that allows users to select a country code from a dropdown, with the selected code appearing before the input.
<div class="w-full max-w-sm min-w-[200px] mt-4 ">
<label class="block mb-1 text-sm text-slate-800">
Enter Phone Number
</label>
<div class="relative mt-2">
<div class="absolute top-2 left-0 flex items-center pl-3">
<button id="dropdownButton" class="h-full text-sm flex justify-center items-center bg-transparent text-slate-700 focus:outline-none">
<span id="dropdownSpan">+33</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 ml-1">
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="h-6 border-l border-slate-200 ml-2"></div>
<div id="dropdownMenu" class="min-w-[150px] overflow-hidden absolute left-0 w-full mt-10 hidden w-full bg-white border border-slate-200 rounded-md shadow-lg z-10">
<ul id="dropdownOptions">
<li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="+33">France (+33)</li>
<li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="+49">Germany (+49)</li>
<li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="+34">Spain (+34)</li>
<li class="px-4 py-2 text-slate-800 hover:bg-slate-100 text-sm cursor-pointer" data-value="+1">USA (+1)</li>
</ul>
</div>
</div>
<input
type="number"
class="w-full h-10 pl-20 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="324-456-2323" />
</div>
</div>
<script>
document.getElementById('dropdownButton').addEventListener('click', function() {
var dropdownMenu = document.getElementById('dropdownMenu');
if (dropdownMenu.classList.contains('hidden')) {
dropdownMenu.classList.remove('hidden');
} else {
dropdownMenu.classList.add('hidden');
}
});
document.getElementById('dropdownOptions').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
const dataValue = event.target.getAttribute('data-value');
document.getElementById('dropdownSpan').textContent = dataValue;
document.getElementById('dropdownMenu').classList.add('hidden');
}
});
document.addEventListener('click', function(event) {
var isClickInside = document.getElementById('dropdownButton').contains(event.target) || document.getElementById('dropdownMenu').contains(event.target);
var dropdownMenu = document.getElementById('dropdownMenu');
if (!isClickInside) {
dropdownMenu.classList.add('hidden');
}
});
</script>Check out this phone input where the label text moves up and becomes smaller as the user starts typing, ensuring the label is always visible.
<div class="w-full max-w-sm min-w-[200px]">
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z" clip-rule="evenodd" />
</svg>
</div>
<input
id="contactNumber"
class="peer w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded pl-10 pr-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
pattern="^\+\d{1,3}\s\d{1,3}-\d{3}-\d{4}$"
title="Phone number must be in the format: +1 123-456-7890"
maxlength="16"
required
/>
<label for="contactNumber" class="absolute bg-white px-1 left-9 top-2.5 text-slate-400 text-sm transition-all transform origin-left peer-focus:-top-2 peer-focus:left-10 peer-focus:text-xs peer-focus:text-slate-400 peer-focus:scale-90">
e.g., +1 123-456-7890
</label>
</div>
</div>
<script>
// Add event listener to the input field
document.getElementById('contactNumber').addEventListener('input', function (e) {
// Replace any non-numeric characters except +, -, and space
e.target.value = e.target.value.replace(/[^+\d\s-]/g, '');
});
</script>This phone input component paired with a dropdown allows users to choose their primary contact number from multiple saved numbers. Try to your application now!
<div class="w-full max-w-sm min-w-[200px]">
<label class="block mb-1 text-sm text-slate-800">
Contact Number
</label>
<div class="relative">
<select
class="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md appearance-none cursor-pointer">
<option value="+33">(+33) 123-456-7890</option>
<option value="+49">(+49) 123-456-7890</option>
<option value="+31">(+31) 123-456-7890</option>
<option value="+34">(+34) 123-456-7890</option>
</select>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" class="h-5 w-5 ml-1 absolute top-2.5 right-2.5 text-slate-700">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
</svg>
</div>
</div>Use this phone input example integrated within a sign-in or authentication form, with an option to continue using the phone number or sign in with Google.
<div class="w-full max-w-sm min-w-[200px] mx-auto">
<label class="block mb-1 text-sm text-slate-800">
Phone Number
</label>
<input
type="text"
placeholder="(+33) 123-456-7890"
pattern="\(\+\d{2}\) \d{3}-\d{3}-\d{4}"
title="Phone number format should be like (+33) 123-456-7890"
class="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded px-3 py-2 mb-4 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
maxlength="16"
required
/>
<button class="w-full h-10 bg-slate-800 text-white text-sm rounded px-3 py-2 mb-4 hover:bg-slate-700 transition duration-300">
Continue
</button>
<div class="flex items-center justify-center mb-4">
<hr class="w-full border-slate-200" />
<span class="px-2 text-sm text-slate-500">Or</span>
<hr class="w-full border-slate-200" />
</div>
<button class="w-full h-10 bg-white text-sm text-slate-700 border border-slate-200 rounded px-3 py-2 flex items-center justify-center hover:bg-slate-50 transition duration-300">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" class="h-5 w-5 mr-2" viewBox="0 0 48 48">
<path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"></path><path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"></path><path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"></path><path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"></path>
</svg>
Sign In With Google
</button>
</div>