devsnips
Search docs, APIs, guides…

Component

Phone Input

Phone number input components with country code selection and formatting

  • Component
  • Tailwind
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/input/phone-input/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Input/phone-input
registry path: Tailwind/Components/Input/phone-input

Source

Implementation

code.html 
<!-- Phone Input - Standard -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
  <input type="tel" placeholder="(555) 123-4567" class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
</div>

<!-- Phone Input - With Country Code -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Mobile Number</label>
  <div class="flex">
    <select class="shrink-0 px-3 py-3 bg-gray-50 border border-gray-300 rounded-l-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
      <option>+1 🇺🇸</option>
      <option>+44 🇬🇧</option>
      <option>+91 🇮🇳</option>
      <option>+61 🇦🇺</option>
    </select>
    <input type="tel" placeholder="(555) 123-4567" class="flex-1 min-w-0 px-4 py-3 bg-white border border-gray-300 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
  </div>
</div>

<!-- Phone Input - Formatted -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Contact Number</label>
  <div class="flex items-center flex-wrap gap-2">
    <input type="text" maxlength="3" placeholder="555" class="w-16 px-3 py-3 bg-white border border-gray-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-blue-500" />
    <span class="text-gray-400">-</span>
    <input type="text" maxlength="3" placeholder="123" class="w-16 px-3 py-3 bg-white border border-gray-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-blue-500" />
    <span class="text-gray-400">-</span>
    <input type="text" maxlength="4" placeholder="4567" class="w-20 px-3 py-3 bg-white border border-gray-300 rounded-lg text-center focus:outline-none focus:ring-2 focus:ring-blue-500" />
  </div>
</div>

<!-- Phone Input - WhatsApp Style -->
<div class="mt-4 p-4 bg-green-50 rounded-xl">
  <label class="block text-sm font-medium text-green-800 mb-2">WhatsApp / Mobile</label>
  <div class="flex gap-3">
    <div class="flex items-center gap-2 px-4 py-3 bg-white border border-green-200 rounded-lg">
      <span class="text-xl">🇺🇸</span>
      <span class="text-sm text-gray-600">US +1</span>
    </div>
    <input type="tel" placeholder="555 123 4567" class="flex-1 min-w-0 px-4 py-3 bg-white border border-green-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors" />
  </div>
</div>
43 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/input/phone-input
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/input/phone-input/

Install: npx devsnips add
Tailwind/Components/Input/phone-input

This is the Phone Input — Phone number input components with country code selection and formatting

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/input/phone-input