Te enviaremos un código por SMS
Teléfono con prefijo de país
Un selector de país con bandera y prefijo pegado al número, que se agrupa de tres en tres.
Ajustes
Código
<div class="uv-iph"><label for="uv-iph-in">Teléfono</label><div class="fd"><span class="cc"><span class="fl" aria-hidden="true">🇪🇸</span><select aria-label="Prefijo"><option value="+34" data-f="🇪🇸" selected>España +34</option><option value="+52" data-f="🇲🇽">México +52</option><option value="+54" data-f="🇦🇷">Argentina +54</option><option value="+44" data-f="🇬🇧">Reino Unido +44</option><option value="+49" data-f="🇩🇪">Alemania +49</option><option value="+33" data-f="🇫🇷">Francia +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">Te enviaremos un código por SMS</p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Inputs
Ver todos: InputsDónde usarlo
Los registros internacionales necesitan el prefijo junto al número, no en un paso aparte. Aquí un select nativo queda invisible sobre una bandera y un prefijo, así que al tocarlo se abre el selector del sistema en el móvil; al elegir país, la bandera nueva aparece con un salto y el foco pasa al número, que se agrupa de tres en tres al escribir.
Como el select es nativo, es accesible y rápido en cualquier dispositivo. Añade o quita países en la lista de opciones y usa la pista bajo el campo para explicar para qué quieres el número.