Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

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.

The button always reads Language. The menu checks one language, starting at English, with a flag beside each language's own name.

Use it when the locale is a single choice people set rarely. If the current name should show while closed, put it on the button or use a Select. In React, Base UI stores the code and does not translate the page.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    <LanguagesIcon aria-hidden="true" data-icon="inline-start" />
    Language
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-48">
    <DropdownMenuRadioGroup onValueChange={setLanguage} value={language}>
      <DropdownMenuLabel>Select Language</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuRadioItem value="en">
        <span className="flex items-center gap-2">
          <span aria-hidden="true">🇺🇸</span>
          <span>English</span>
        </span>
      </DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="es">
        <span className="flex items-center gap-2">
          <span aria-hidden="true">🇪🇸</span>
          <span>Español</span>
        </span>
      </DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="fr">
        <span className="flex items-center gap-2">
          <span aria-hidden="true">🇫🇷</span>
          <span>Français</span>
        </span>
      </DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="de">
        <span className="flex items-center gap-2">
          <span aria-hidden="true">🇩🇪</span>
          <span>Deutsch</span>
{/* The rest of the file is under 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.

Can I change the language from the keyboard?

Yes. Open the menu with Enter, Space or Arrow Down, move with the arrow keys, and press Enter to pick a language. Escape closes the menu and returns focus to the button.

Is Select Language a choice?

No. It's the DropdownMenuLabel that names the radio group, followed by a separator. It can't be focused or picked.

API Reference

Dropdown Menu

Sets onValueChange={setLanguage}, value={language}, value="en", value="es", value="fr" and value="de". The rest is on the Dropdown Menu page.

Button

Sets variant="outline". The rest is on the Button page.

All 30 dropdown menu examples