Country filter with flags
A country list with flag emojis and a search field inside the menu to jump straight to one.
Settings
Code
<div class="uv-fcn"><button class="tg"><b>馃實 All countries</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="Search country"></label><div class="ls"><button data-v="馃嚜馃嚫 Spain">馃嚜馃嚫 Spain</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="馃嚥馃嚱 Mexico">馃嚥馃嚱 Mexico</button><button data-v="馃嚡馃嚨 Japan">馃嚡馃嚨 Japan</button></div></div></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鈥檛 use React.
More in Filters
Where to use it
Flags make a long list easy to scan, since people spot their own flag before they read the name. It suits a tour operator filtering trips by destination, a language school listing where its courses run, or a directory of suppliers by country. The built-in search saves scrolling past fifty entries. Also known as a country picker.
Flag emojis look different on each system, and some Windows versions show letters instead. If that matters for your audience, swap them for small SVG flags. Write the country names in the visitor's language, not in English only.