shadcn.io is not affiliated with official shadcn/ui
Target Language Select Form Block for Vue
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 Vue with Ark 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").