shadcn.io is not affiliated with official shadcn/ui
Target Language Select Form Block for React
A 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.
Installation
Overview
Add a target language with this language select form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner. Two cells on a shared hairline hold a Select of twelve languages, each written in its own script with its English name and its code ("Deutsch German de", "العربية Arabic ar"; the names come from Intl.DisplayNames, and Arabic and Hebrew carry their own lang and direction), and a region select that is there when the language has variants (English, Spanish, French and Portuguese do); when it has none its space is held and a sentence says so. A line under them shows the tag they make in a code element ("pt-BR") and what it reads as ("Portuguese (Brazil)"). Add puts the tag in the list of target languages, refuses one already there in words, and stops at six; each chip has its own Remove and focus moves to its neighbour. It's built from Select, Shine Button and Guides, with a CSS entrance only. For localisation tools, language settings and any form that adds a locale rather than switching the page's own.
FAQ
Where do the language names come from?
From the browser: Intl.DisplayNames gives each language's English name and, asked in its own language, its own name, and gives region names such as "Brazil". Nothing is typed twice, so adding a language to LANGUAGES (its code, whether it is written from the end, and its region codes) is enough. Each native name sits in a bdi with lang and dir, so a screen reader pronounces it in its language and Arabic and Hebrew read from the end.
How is the locale tag built?
The language code, then a dash and the region code when a region is chosen: "pt" and "BR" make "pt-BR". Choosing "Any region" leaves the bare language, "pt". The line under the selects shows the tag in a code element, and the chips use the same tag. A language with no variants (German, Japanese) holds the region space and says it is added as its bare code.
What does Add refuse?
A tag already in the list ("pt-BR is already a target.") and a seventh target ("Not added. 6 is the most."). The reason is in the line under the tag and in the foot's status, and nothing else moves. Remove drops a chip and puts focus on the next one, or on the language select when the list is empty; the list's space is held so the panel never changes height.
How does it work from the keyboard?
Both selects open with Enter, Space or Arrow Down, move with the arrows, jump by typing the first letters of the English name and close with Escape. Enter in the select does not submit the form; the Add language button does. Each chip's Remove button is named for its tag ("Remove fr-FR").
What stays local, and how do I connect it for real?
Nothing is saved: the list lives in this tab and the foot says "Added pt-BR. Nothing was saved." Replace the body of submit with a call that adds the locale to your project, and load the starting targets from it instead of START.
How do I connect it to react-hook-form or TanStack Form?
The value is a list of tags. With react-hook-form, use useFieldArray or one Controller holding the array, and call its append and remove from the submit and remove handlers. The language and region selects are only the way to build the next tag.
Related
- 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
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
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
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
Tag Input Form
Text fieldsA tags field that cleans every tag it takes (trimmed, lower case, no repeats), splits a pasted list and shows what was pasted next to what was added.
- 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.