shadcn.io is not affiliated with official shadcn/ui
Searchable Region Select Form Block for React
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 React with Base 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). With react-hook-form, use Controller and pass the label to field.onChange from the pick handler, and validate that it is one of LABELS. Keep the typed search text out of the form's state: it is only a filter.
Related
- Pro
Task Status Select Form
SelectsA required select of five task statuses, each with a glyph and a word, that moves a drawn task row to the status you choose once Move task is pressed.
- Pro
Grouped Person Select Form
SelectsA select of nine people grouped by team, each with initials, name and duty, beside a week strip that shows that person's hours and marks a week that would pass 40 hours.
- Pro
Ship-To Country Select Form
SelectsA combobox of 20 countries in four areas, each with a two-letter tile and calling code, where four are out of reach with the reason in the row and a band gives what a parcel to the chosen country needs.
- Pro
Multi Select Skills Form
SelectsA combobox that holds up to five of eighteen skills as chips inside the field, says its limit in words and refuses a sixth, and counts the open projects the skills cover.
- Pro
Time Zone Select Form
Dates and timesA grouped select of sixteen time zones with the offset in each label, a real read of the device's own zone after the page loads, and one sentence saying how far the chosen zone is from it.
- Pro
Target Language Select Form
SelectsA form that adds a target locale: twelve languages written in their own script, a region select that appears when the language has variants, the resolved tag in a code element and a list of targets that refuses duplicates.