CurrencySelector
Compact currency picker with optional country flag and background treatment.
Quick Preview
With background
Open menu
Usage
import { CurrencySelector } from "@giddaa-housing/ui/currency-selector";
const currencies = [
{ code: "NGN", label: "Naira" },
{ code: "USD", label: "Dollar" },
];
<CurrencySelector options={currencies} defaultValue="NGN" />;Examples
Flags
Flags are inline SVGs resolved from the currency code — ISO 4217 codes lead with their country, so NGN renders the NG flag and EUR renders the EU flag. NG, US, GB, EU, CA, JP, GH, and AE ship with the package; anything else falls back to a neutral globe until you pass your own artwork.
// Override the derived country, or supply artwork outright.
{ code: "XOF", label: "West African CFA Franc", countryCode: "SN" }
{ code: "BTC", label: "Bitcoin", flag: <BitcoinMark className="size-4" /> }Visual Variants
Use withBackground and showFlag to match compact toolbar or pill-style placements.
Without background, with flag
With background, without flag
Without background or flag
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
options | CurrencySelectorOption[] | - | Currency options with code, label, and optional countryCode/flag. |
option.countryCode | string | first two letters of code | ISO 3166-1 alpha-2 code that selects the built-in flag. |
option.flag | ReactNode | - | Custom flag artwork for currencies the built-in set does not cover. |
value / defaultValue | string | first option | Controlled or uncontrolled selected currency code. |
onValueChange | (value, option) => void | - | Called when a currency is selected. |
open / defaultOpen | boolean | - | Controlled or uncontrolled dropdown open state. |
withBackground | boolean | true | Uses tertiary action surface for the trigger. |
showFlag | boolean | true | Shows the selected option flag in the trigger. |
showOptionFlags | boolean | true | Shows flags inside dropdown options. |
size | `"sm" | "md" | "lg"` |
className / contentClassName | string | - | Local trigger or dropdown styling overrides. |
Accessibility
- Provide clear
labelvalues because each option is announced as currency code plus currency name. - Use
value/defaultValuecodes that match one of the provided options. - Preserve the component-provided Select behavior for keyboard navigation, focus, and selection.
- Do not communicate selection by color alone; the dropdown includes a check icon for the active option.