shadcn.io is not affiliated with official shadcn/ui
Dropdown Menu examples · Settings
Language Selector Dropdown Menu for React
A language picker with a flag beside each language's own name and a check on the current one.
People look for their language by its own name, not yours. This dropdown menu opens from a Language button and lists English, Español, Français, Deutsch, 日本語 and 中文 as radio items, each after its flag, under a Select Language label. It fits app headers, footers and settings pages of multilingual sites.
Preview
Installation
FAQ
How is the language stored?
As one code, en to start, in a radio group: en, es, fr, de, ja or zh. Picking a row stores its code and moves the check.
DropdownMenuRadioGroup takes value, and onValueChange receives the new code.
What does each row show?
A flag emoji, hidden from screen readers with aria-hidden, then the language's name in that language. Flags stand for countries, not languages, so the name is what people read.
Does the button show the current language?
No. The outline button always reads Language, after a languages icon, and the check in the menu shows the choice. Print the current name in the button if people should see it without opening the menu.
Can two languages be selected?
No. The radio group holds one code, so picking Français unchecks English.
Related
- Theme Selector Dropdown MenuA theme picker behind a palette button
- Multi-Account Switcher Dropdown MenuAn account switcher whose button shows
- Dropdown with Radio Items Dropdown MenuA panel position picker where exactly one
- Simple Single Select ComboboxA single-select combobox that opens from
- Button with Text (Standard)The one filled action
- Notification Settings Dropdown MenuA notifications menu with two groups of