- 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
Adressfeld mit Kartenpin
Tippe eine Straße, wähle einen Vorschlag, und ein Pin fällt auf einen kleinen Stadtplan, der an die Stelle heranzoomt.
Einstellungen
Code
<div class="uvq06-ad"><label for="uvq06-ad-in" class="lb">Lieferadresse</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="Straße und Hausnummer"><ul id="uvq06-ad-ls" role="listbox" aria-label="Vorschläge" 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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Alle ansehen: EingabefelderWofür du ihn nutzen kannst
Ein Adressfeld mit barrierefreier Combobox und einem stilisierten Stadtplan aus Inline-SVG: Häuserblöcke, ein Park, ein Fluss und Alleen. Vorschläge filtern unabhängig von Akzenten und lassen sich mit Pfeiltasten und Enter wählen. Nach der Auswahl zoomt die Karte an die Stelle, ein Pin fällt federnd herunter, und eine Welle läuft über den Boden.
Die Hauptfarbe ist der Pin, die zweite Farbe die Parks. Ersetze die Vorschlagsliste durch Ergebnisse deines Geocoding-Dienstes samt Kartenposition und nutze es im Checkout mit Lieferung, in Filialfindern und Buchungsformularen.