LocaleSwitcher

Language selector — a convenience wrapper around the Select primitive, powered by the i18n system with flag support and the Select styling axes.

Variant

Size

Show Flag

Disabled

<LocaleSwitcher
  showFlag
  size="sm"
  variant="outlined"
/>

01 Examples

Basic

Default trigger with flags; pass showFlag=false to drop them.

<LocaleSwitcher showFlag />
<LocaleSwitcher showFlag={false} />

In a settings panel

Realistic use — small outlined trigger inline with other preference rows.

Preferences

Language

Region

<div
  class="bg-surface-elevated border-border-subtle w-full overflow-hidden rounded-2xl border"
>
  <div class="border-border-subtle border-b px-5 py-3">
    <h3 class="text-text-primary text-sm font-semibold">Preferences</h3>
  </div>
  <div class="divide-border-subtle divide-y">
    <div class="flex items-center justify-between px-5 py-3">
      <p class="text-text-primary text-sm font-medium">Language</p>
      <LocaleSwitcher variant="outlined" size="sm" showFlag />
    </div>
    <div class="flex items-center justify-between px-5 py-3">
      <p class="text-text-primary text-sm font-medium">Region</p>
      <Select
        options={[
          { label: 'Europe', value: 'eu' },
          { label: 'North America', value: 'na' },
          { label: 'Asia', value: 'asia' }
        ]}
        value="eu"
        variant="outlined"
        size="sm"
      />
    </div>
  </div>
</div>

02 Customization

Branded trigger

Override the underlying Select trigger slot with a gradient brand-look.

<LocaleSwitcher
  showFlag
  slotClasses={{
    trigger:
      'bg-linear-to-r from-indigo-500 to-violet-500 text-white border-transparent shadow-md shadow-indigo-500/20 hover:from-indigo-600 hover:to-violet-600'
  }}
/>

03 Accessibility

Inherits the Select listbox semantics — role="listbox", aria-expanded, aria-selected — plus a trigger aria-label from the i18n bundle. ↑ ↓ navigate, Enter selects, Esc closes. Locale names resolve from the active translation bundle.

04 API Reference

5 props

Prop	Type	Default	Description
`locales`	`Locale[]`	—	Restrict the displayed locales. Defaults to all locales registered in i18n.
`mint`	`SelectSingleProps<string>['mint']`	`'none'`	Micro-interaction preset forwarded to the inner Select trigger. Redeclared from SelectSingleProps so the inheritance is a documented contract rather than an accident of the Omit list.
`onLocaleChange`	`(locale: Locale) => void`	—	Called after the locale has been changed successfully.
`selectionIndicator` inherited	checkmarknone	—	Selection indicator rendered next to each option. - `'checkmark'` — trailing check icon (default) - `'none'` — no indicator (typical when using `customItem`)
`showFlag`	`boolean`	`false`	Show flag emoji alongside locale name.

05 Types

Local type definitions used by this component.

4 types

Only referenced

Name	Kind	Category	Description
LocaleSwitcherProps	interface	props	Props interface for LocaleSwitcher component
SelectSingleProps	interface	props	Single-select arm. `value` is `T \| null`, `selectionIndicator` excludes `'checkbox'` (a checkmark or no indicator), `nullOption` is available, `multiPlaceholder` is not — there's never more than one selected label to summarize.
SelectValue	type	helper	Primitive value types accepted by Select / Combobox options. Strings are the default; numbers and booleans cover form fields bound to numeric IDs or yes/no flags without forcing the consumer to convert back and forth at every call site.
NullOptionConfig	interface	helper	Configuration for an explicit "no value" option rendered at the top of the listbox. Selecting it sets `value` to `null` and fires `onValueChange(null)`. Pass a string to use it as the label, or an object for additional control: `nullOption="No selection"` `nullOption={{ label: 'Leave unassigned' }}`

06 Installation

Import

import { LocaleSwitcher } from '@urbicon-ui/blocks';