shadcn.io is not affiliated with official shadcn/ui
Ship-To Country Select Form Block for Solid
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 Solid with Ark 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). 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.