shadcn.io is not affiliated with official shadcn/ui
Multi-Language FAQ Block for Vue
An FAQ in English, Spanish and Arabic for a relocation service: a language switcher swaps the title, questions and answers, and sets lang and dir so Arabic lays the block out from its end.
Installation
Overview
A multi-language FAQ for Vue with Ark UI. A start-aligned header sits over a band holding a language switcher, English, Español and العربية, and six accordion rows that run from rail to rail under a rule with + marks. Choosing a language swaps the title, the sentence, every question and every answer, all written once in each language, and sets lang and dir on the block's region: Arabic lays the header and the rows out from the end, with the plus signs at the start, while the switcher keeps its order and place so it never moves under the pointer. The open question stays open. It's built from Accordion, Segment Group, Direction Provider and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product and service pages with visitors in more than one language.
FAQ
How do I add or change a language?
Each entry of LANGUAGES holds one language: its code, dir (ltr or rtl), the label shown in the switcher in that language, the title and sentence, and the questions with their id, question and answer. Add an entry with the same question ids and the switcher grows by one segment. Keep the order of ids the same in every language, and have each translation read by a native speaker before you ship it: these are written as examples.
How does right-to-left work?
The region carries dir and lang for the chosen language, and the whole block is built with logical classes (ps-, text-start, border-e), so it mirrors on its own. The catalog's Direction Provider also tells the components inside it which way to read. The switcher sits in its own left-to-right box and keeps its order, with each label tagged with its own lang, so a screen reader pronounces "Español" and "العربية" correctly.
What happens to the open question when the language changes?
It stays open: the accordion isn't remounted, and every language uses the same ids. If you change OPEN_QUESTION, use an id that exists in every language.
Are all the languages in the page's markup?
Yes, but only one is shown. The three languages share one grid cell: the chosen one is visible, and the others are invisible, hidden from the accessibility tree and inert, so a screen reader and the Tab key only meet the language on screen. That keeps the block exactly as tall as its tallest language, so switching never moves what is below it. It also means search engines see all three. For separate pages per language, give each its own URL and render one language per page; this block is for switching in place.
How does the switcher work with a keyboard and a screen reader?
It's a group named "Language" with three options; the arrow keys move between them and the choice applies at once. The questions are buttons in h3 headings, and Enter or Space opens one.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.