shadcn.io is not affiliated with official shadcn/ui
Searchable Region Select Form Block for Vue
A combobox of 24 regions that narrows as you type, marks the letters that match, counts the matches and spells out the chosen region, with its facts in a side cell.
Installation
Overview
Pick one region out of many with this searchable select form for Vue with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner, in two cells. The first holds a Combobox over twenty-four regions, each named for its area and a number with its city and country ("nordic-1, Oslo, Norway"): typing narrows the list by any part of that text, the letters that match are marked in every row, a count says "3 of 24 regions" and, a moment after the last key, the same count is read out ("3 matches"). A search that matches nothing says so inside the list with the words typed, and a clear button empties the field. The chosen region is spelled out under the field. The second cell lists its facts: the zones, where its data stays and a typed round trip from Frankfurt, labelled as sample figures, not measured. Save region refuses an empty field in words and puts focus back in it. It's built from Combobox, Shine Button and Guides, with the matches marked by the Search Highlight Text and a CSS entrance only. For deploy consoles, settings that pick one item from a long list and any form where a plain select is too long to scan.
FAQ
How do I use my own regions?
Edit REGIONS: each has an id, a city, a country, where the data stays, a typed round trip and a number of zones. The list, the label ("nordic-1, Oslo, Norway"), the search, the marks, the count and the facts all come from it. The search folds accents and case, so "sao" finds São Paulo, and it matches any part of the label, so "norway" finds the Oslo region.
How does the search work, and what does it say?
The block owns the filter: shownLabels returns the regions whose label holds what was typed, and every base is given that same list, so the count, the marks and the rows always agree. While typing the count "3 of 24 regions" is visible but hidden from assistive technology; once typing has paused for about 600 ms the foot's status line says "3 matches." or "No region matches." once, so nothing is read for every key.
How does it work from the keyboard?
Arrow Down opens the list and moves through the rows, Enter picks the highlighted one, and Escape closes the list. Typing opens it too. The clear button empties the field and the choice. The field is named by its label, "Region". Typed text that is exactly a region's label counts as a pick, not a search, so reopening the list shows all of them.
What stays local, and how do I connect it for real?
Nothing is deployed: Save region says "nordic-1 set in this demo. Nothing was deployed." and a second press says it is already the region. The round trips are typed sample figures, and the block says so. Replace the body of submit with a call that moves the service, and load the regions and their real latencies from your API instead of REGIONS.
How do I connect it to react-hook-form or TanStack Form?
The value is one string, the region's label (look the region up with regionOf). react-hook-form is a React library; use TanStack Form's adapter for your framework and set the field's value from the pick handler. Keep the typed search text out of the form's state: it is only a filter.