- Gran Vía 2828013 Madrid
- Calle de Alcalá 4228014 Madrid
- Paseo del Prado 828014 Madrid
- Calle Mayor 1528013 Madrid
- Plaza de Santa Ana 328012 Madrid
- Calle de Fuencarral 7028004 Madrid
Dirección con mapa
Escribe una calle, elige entre las sugerencias y un pin cae sobre un pequeño plano que se acerca a esa zona.
Ajustes
Código
<div class="uvq06-ad"><label for="uvq06-ad-in" class="lb">Dirección de entrega</label><div class="fd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0C18.5 15.4 12 21 12 21z"/><circle cx="12" cy="10" r="2.3"/></svg><input id="uvq06-ad-in" role="combobox" aria-expanded="false" aria-controls="uvq06-ad-ls" aria-autocomplete="list" autocomplete="off" spellcheck="false" placeholder="Calle y número"><ul id="uvq06-ad-ls" role="listbox" aria-label="Sugerencias" hidden><li role="option" id="uvq06-ad-o0" data-x="40" data-y="38" aria-selected="false"><b>Gran Vía 28</b><span>28013 Madrid</span></li><li role="option" id="uvq06-ad-o1" data-x="64" data-y="46" aria-selected="false"><b>Calle de Alcalá 42</b><span>28014 Madrid</span></li><li role="option" id="uvq06-ad-o2" data-x="72" data-y="70" aria-selected="false"><b>Paseo del Prado 8</b><span>28014 Madrid</span></li><li role="option" id="uvq06-ad-o3" data-x="26" data-y="58" aria-selected="false"><b>Calle Mayor 15</b><span>28013 Madrid</span></li><li role="option" id="uvq06-ad-o4" data-x="48" data-y="72" aria-selected="false"><b>Plaza de Santa Ana 3</b><span>28012 Madrid</span></li><li role="option" id="uvq06-ad-o5" data-x="46" data-y="18" aria-selected="false"><b>Calle de Fuencarral 70</b><span>28004 Madrid</span></li></ul></div><div class="mp" aria-hidden="true"><svg viewBox="0 0 200 110" preserveAspectRatio="xMidYMid slice"><rect class="ld" width="200" height="110"/><rect class="pk" x="118" y="10" width="56" height="34" rx="5"/><circle class="pk" cx="34" cy="88" r="10"/><path class="rv" d="M-5 102C30 92 62 108 100 97S165 80 205 90"/><path class="s2" d="M0 20H200M0 56H200M0 84H200M20 0V110M36 0V110M84 0V110M142 0V110M182 0V110"/><path class="s1" d="M0 40H200M0 70H200M58 0V110M110 0V110M0 106L132 0"/></svg><span class="rp"></span><span class="pin"></span></div><p class="ok" aria-live="polite"></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
Un campo de dirección con combobox accesible y un plano de calles estilizado en SVG en línea: manzanas, un parque, un río y avenidas. Las sugerencias se filtran sin importar las tildes y funcionan con flechas y Enter. Al elegir una, el plano se acerca a ese punto, cae un pin con rebote y una onda se extiende por el suelo.
El color principal es el pin y el secundario los parques. Sustituye la lista de sugerencias por los resultados de tu servicio de geocodificación con sus posiciones en el plano, y úsalo en pagos con envío, buscadores de tiendas y reservas.