Phone Input

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!-- 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>

1
2
3
4
5
6
7
8
9
10
11
12

# Phone Input

Phone number input.

## Usage
```bash
npx devsnips add Tailwind/Components/Input/phone-input
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`