CentercodeDitto
DittoPorygonAPI

LanguagePicker

Dropdown for selecting preview/translation languages with primary language indicator

Overview

LanguagePicker provides a dropdown for selecting preview or translation languages. It highlights the primary language and supports both default and compact variants for different layout contexts.

Key Features

  • Two variants: default (with label) and compact (minimal, for tight spaces)
  • Visual indicator for primary/source language
  • Loading state during translation operations
  • Accessible keyboard navigation

Examples

Default Variant

Standard dropdown with label, suitable for forms and settings pages.

Selected: EN

Compact Variant

Minimal variant for tight spaces like PageHeader actions or toolbars.

Selected: ES

With Loading State

Shows loading spinner during async operations like fetching translations.

Selected: EN

Props Reference

PropTypeDefaultDescription
valuestring-Currently selected language code
languagesLanguageOption[]-Array of available languages { code, name, nativeName }
primaryLanguagestring-Primary/source language code (shown with indicator)
onChange(locale: string) => void-Callback when language selection changes
isLoadingbooleanfalseShow loading spinner (e.g., during translation)
variant"default" | "compact""default"Visual variant (compact for tight spaces)
disabledbooleanfalseDisable the picker

Usage

import { LanguagePicker, type LanguageOption } from '@/features/translations';
import { useState } from 'react';

const languages: LanguageOption[] = [
  { code: 'en', name: 'English', nativeName: 'English' },
  { code: 'es', name: 'Spanish', nativeName: 'Español' },
  { code: 'fr', name: 'French', nativeName: 'Français' },
];

const [selectedLanguage, setSelectedLanguage] = useState('en');

// Default variant
<LanguagePicker
  value={selectedLanguage}
  languages={languages}
  primaryLanguage="en"
  onChange={setSelectedLanguage}
/>

// Compact variant (for tight spaces like PageHeader actions)
<LanguagePicker
  value={selectedLanguage}
  languages={languages}
  primaryLanguage="en"
  onChange={setSelectedLanguage}
  variant="compact"
/>

// With loading state
<LanguagePicker
  value={selectedLanguage}
  languages={languages}
  onChange={setSelectedLanguage}
  isLoading={true}
/>