## Language Picker (S—186)

A language switcher listing each language in its own script with its English name, searchable in either.

- URL: https://sundaeui.dev/components/language-picker
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/language-picker.json`
- Tags: language, i18n, locale, menu, switcher, select

Each option shows the native name (日本語, Español) with the English name beside it, and search matches both, so people can find their language without reading yours.
The trigger shows a short code; suggested languages from the browser are pinned at the top.

### Usage

```tsx
import { LanguagePicker } from '@/components/sundae/language-picker'

<LanguagePicker />
```

### Props

- `languages` (`{ code: string; native: string; english: string }[]`, required): Options.
- `value / defaultValue` (`string`): Current code.
- `onValueChange` (`(code: string) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Site headers, footers, settings.

### When not to use

- Region pickers (currency, shipping): those are different settings.

### Accessibility

- A listbox with each option’s lang attribute set so screen readers pronounce native names correctly.
- Search field labelled; Escape closes.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Move
- Enter: Choose
- Esc: Close