Te enviaremos un código por SMS
Phone input with country code
A country selector with flag and dialing code attached to the number, which groups digits in threes.
Settings
Code
<div class="uv-iph"><label for="uv-iph-in">Phone</label><div class="fd"><span class="cc"><span class="fl" aria-hidden="true">🇪🇸</span><select aria-label="Country code"><option value="+34" data-f="🇪🇸" selected>Spain +34</option><option value="+52" data-f="🇲🇽">Mexico +52</option><option value="+54" data-f="🇦🇷">Argentina +54</option><option value="+44" data-f="🇬🇧">United Kingdom +44</option><option value="+49" data-f="🇩🇪">Germany +49</option><option value="+33" data-f="🇫🇷">France +33</option></select><b>+34</b><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10l5 5 5-5"/></svg></span><input id="uv-iph-in" type="tel" inputmode="tel" autocomplete="tel-national" placeholder="612 345 678"></div><p class="ht">We’ll text you a code</p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
International sign-ups need the country code next to the number, not in a separate step. Here a native select sits invisibly over a flag and prefix, so tapping it opens the system picker on phones; choosing a country pops the new flag in and moves focus to the number, which is formatted in groups of three as you type.
Because the select is native, it is accessible and fast on every device. Add or remove countries in the options list, and use the hint below the field to explain why you need the number.