Länderfilter mit Flaggen
Eine Länderliste mit Flaggen-Emojis und einem Suchfeld im Menü, um direkt zum richtigen Land zu springen.
Einstellungen
Code
<div class="uv-fcn"><button class="tg"><b>🌍 Alle Länder</b><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><label class="sb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/></svg><input placeholder="Land suchen"></label><div class="ls"><button data-v="🇪🇸 Spanien">🇪🇸 Spanien</button><button data-v="🇫🇷 Francia">🇫🇷 Francia</button><button data-v="🇩🇪 Alemania">🇩🇪 Alemania</button><button data-v="🇮🇹 Italia">🇮🇹 Italia</button><button data-v="🇵🇹 Portugal">🇵🇹 Portugal</button><button data-v="🇲🇦 Marruecos">🇲🇦 Marruecos</button><button data-v="🇲🇽 Mexiko">🇲🇽 Mexiko</button><button data-v="🇯🇵 Japan">🇯🇵 Japan</button></div></div></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 Filter
Wofür du ihn nutzen kannst
Flaggen machen lange Listen schnell überschaubar, weil man die eigene Flagge sieht, bevor man den Namen liest. Das passt zu einem Reiseveranstalter, der Touren nach Ziel filtert, zu einer Sprachschule mit Kursorten im Ausland oder zu einem Lieferantenverzeichnis nach Land. Die Suche erspart das Scrollen durch fünfzig Einträge. Bekannt auch als Länderauswahl oder Country Picker.
Flaggen-Emojis sehen auf jedem System anders aus, und manche Windows-Versionen zeigen stattdessen Buchstaben. Wenn dich das stört, nimm kleine SVG-Flaggen. Schreib die Ländernamen in der Sprache deiner Besucher, nicht nur auf Englisch.