shadcn.io is not affiliated with official shadcn/ui
Ship-To Country Select Form Block for React
A 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.
Installation
Overview
Pick where a parcel goes with this country select form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner, in two bands. The first holds a Combobox over twenty countries in four areas (Europe, The Americas, Asia and Pacific, Middle East and Africa), each row a two-letter tile, the name and the calling code: typing narrows the list by the name, the letters, the code or the area, the matches are marked, a count says "5 of 20 countries" and, a moment after the last key, the same count is read out. Four countries are not served, and their rows are out of reach and say why in the row ("We do not ship here yet."). The second band gives what a parcel to the chosen country needs from typed sample facts: whether a customs form is needed, whether the buyer pays duties, and the delivery time. There is no flag emoji: a tile holds the country's own two letters. Save refuses an empty field in words and puts focus back in it. It's built from Combobox, Shine Button and Guides, with a CSS entrance only. For shipping and checkout forms, and any country field where some choices are unavailable and need a reason.
FAQ
How do I use my own countries and rules?
Edit COUNTRIES: each has an area, a two-letter code, the calling code, whether a customs form is needed, whether the buyer pays duties, a delivery time, a one-line note and, for a country you do not serve, the reason. The list, the search, the marks, the count and the facts band all come from it. A country with a reason is shown out of reach; give it an empty reason to serve it. The facts here are typed samples for a fictional shipper, not trade advice: load the real ones from your carrier or tax service.
Why are some countries out of reach, and can a screen reader tell why?
A country you do not serve is disabled, so it cannot be picked, but it stays in the list: hiding it would leave the visitor wondering whether the shop had forgotten it. Its reason is part of the row's text, so it is read with the name. The name is struck through and the reason is printed under it in full-strength text, so the state does not depend on faded colours.
How does the search work, and what does it say?
The block owns the filter: one function returns the countries whose name, letters, calling code or area hold what was typed, folded for accents and case, and every base is given that same list, so the count, the marks and the rows always agree. While typing the count 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 country matches." once.
How does it work from the keyboard?
Arrow Down opens the list and moves through the rows, skipping the ones out of reach, Enter picks the highlighted one and Escape closes the list. Typing opens it too, and the clear button empties the field and the choice. Typed text that is exactly a country's name 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 saved or shipped: Save country says "Netherlands set in this demo. Nothing was saved." and a second press says it is already the country. Replace the body of submit with a call that sets the order's country, and look the facts up for the chosen country from your own data. The block reads nothing from the browser.
How do I connect it to react-hook-form or TanStack Form?
The value is one string, the country's name (look the country up with countryOf). With react-hook-form, use Controller and pass the name to field.onChange from the pick handler, and validate that it is one of the served names. Keep the typed search text out of the form's state: it is only a filter.
Related
- Pro
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.
- €Pro
Invoice Currency Select Form
Checkout and addressA grouped currency select with symbol, code and name, an amount field, and the same amount in three other currencies from typed sample rates, set with Intl.NumberFormat.
- 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.
- Pro
Address Form with ZIP Help
Checkout and addressA six-column address grid that never changes size: street, an apartment line behind a quiet button, city, a state select and a ZIP code that fills the city and state from a typed table of six.
- Pro
Phone Input with Country Code Form
Numbers and pickersA national-number field joined to a country menu that formats the digits for the chosen country as you type, checks the count per country and shows how the number would be stored.
- 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.