Loading page…
Loading page…
Two purpose-built preference selectors over the canonical animated Select. Each can collapse to an accessible icon button for navigation chrome or expand into a labeled settings field. Menus may show region flags, native language names, ISO locale codes, currency symbols, and disabled choices without consumers rebuilding listbox behavior.
Use icon triggers in a navbar, account popover, or dense settings toolbar. The popup is wider than the button and aligns to its end edge, so labels and flags remain legible without widening the surrounding chrome.
<LanguageSelector defaultValue="fil-PH" onValueChange={setLocale} />
<CurrencySelector defaultValue="PHP" onValueChange={setCurrency} />--ch-primary--ch-primary-muted--ch-surface--ch-bg-raised--ch-border-strong--ch-focusLive controls — activate either icon. The trigger announces both its purpose and current value.
The field trigger carries a visible category label, product icon, current selection, optional flag, and disclosure chevron. Use this form when the preference is a primary row in account or wallet settings.
Native names help users confirm a language before selecting it.
ISO code and symbol stay visible together to disambiguate dollar and peso currencies.
<LanguageSelector trigger="field" value={locale} onValueChange={setLocale} />
<CurrencySelector trigger="field" value={currency} onValueChange={setCurrency} />--ch-primary--ch-primary-muted--ch-surface--ch-bg-raised--ch-border-strong--ch-focusFlags are an optional adornment, never the only language or currency label. Set showFlags={false} for politically neutral or ultra-dense contexts; pass options to control supported locales, native labels, region codes, symbols, and disabled states.
All text and keyboard behavior remain unchanged.
Two-letter countryCode values generate the optional flag glyphs.
The trigger stays readable but cannot open its menu.
const languages = [
{ value: "en-SG", label: "English (Singapore)", countryCode: "SG" },
{ value: "id-ID", label: "Indonesian", nativeLabel: "Bahasa Indonesia", countryCode: "ID" },
];
<LanguageSelector options={languages} showFlags />
<LanguageSelector options={languages} showFlags={false} />Both selectors support controlled and uncontrolled values. The trigger is a real button with aria-haspopup=listbox, announces its current selection, and exposes expanded state. Enter or Space opens it; Tab reaches options; Enter or Space selects; Escape or an outside press dismisses. Flags are aria-hidden because every option retains a full text label. Reduced-motion preferences shorten the unfold and remove item staggering.
Do
Persist stable locale and ISO currency codes, and apply the chosen currency only to secondary display values.
Do not
Infer language from a flag alone, or treat display currency as the denomination in which wallet balances are stored.
Compact controls use only semantic surface, border, foreground, focus, and primary tokens.
--ch-primary--ch-primary-muted--ch-surface--ch-bg-raised--ch-border-strong--ch-focus