Currency Picker

Popover-anchored fiat-currency selector with flag avatars and a searchable list. Wraps Popover + Command; on open the panel shows a Popular section above All Currencies, and the search input swaps to a single All-Currencies list as you type.

Install

import { CurrencyPicker } from '$lib/components/ui/currency-picker';

Custom

Usage

The trigger renders as a compact pill — flag avatar + ISO code + caret — sized to live inside a trade amount row beside the currency-aware numeric input. Click to open the popover and pick another currency; the binding is two-way on a full FiatCurrency record, not just the code, so downstream formatters have the symbol and country code available immediately.

Selected: USD — US Dollar ($)

currency-picker-usage.svelte

<script lang="ts">
	import { CurrencyPicker } from '$lib/components/ui/currency-picker';
	import type { FiatCurrency } from '$lib/components/ui/currency-picker';
	import { FIAT_CURRENCIES } from '$lib/components/trade/trade-data';

	let value = $state<FiatCurrency>(FIAT_CURRENCIES[0]);
</script>

<CurrencyPicker currencies={FIAT_CURRENCIES} bind:value />

Preselection

Initialize the bind variable to whichever currency makes sense for the user's locale. Inside the popover the active row carries the data-state="selected" highlight and a trailing check.

currency-picker-preselected.svelte

<CurrencyPicker
	currencies={FIAT_CURRENCIES}
	bind:value={euroCurrency}
/>

Custom popular set

The default popular set is USD, EUR, GBP, JPY, CAD, AUD. Override popularCodes to pin a region-specific shortlist at the top — handy for an Africa-first rollout or a Latam-only payment route.

currency-picker-popular.svelte

<script lang="ts">
	import { CurrencyPicker } from '$lib/components/ui/currency-picker';
	import type { FiatCurrency } from '$lib/components/ui/currency-picker';
	import { FIAT_CURRENCIES } from '$lib/components/trade/trade-data';

	let value = $state<FiatCurrency>(
		FIAT_CURRENCIES.find((c) => c.code === 'NGN') ?? FIAT_CURRENCIES[0]
	);
</script>

<CurrencyPicker
	currencies={FIAT_CURRENCIES}
	bind:value
	popularCodes={['NGN', 'KES', 'ZAR', 'EGP', 'GHS', 'XOF']}
/>

API reference

Wraps Popover + Command. Uses Avatar with a flag URL fed from currency-flags.ts and falls back to the first letter of the ISO code if the flag image fails to load.

Type	Default	Description
`FiatCurrency[]`	—	Source list. Each entry is { code, symbol, countryCode, name }. The shipped FIAT_CURRENCIES export covers ~45 ISO codes and is the typical input.
`FiatCurrency (bindable)`	—	Currently selected currency record. Two-way bindable.
`boolean (bindable)`	`false`	Two-way bindable popover open state.
`string[]`	`['USD','EUR','GBP','JPY','CAD','AUD']`	Codes pinned to the Popular section in the order provided. Any code not present in `currencies` is dropped silently.
`'start' \| 'center' \| 'end'`	`'center'`	Popover.Content alignment relative to the trigger.
`number`	`8`	Distance in px between the trigger and the popover.
`string`	—	Additional classes merged onto the trigger pill.
`string`	—	Additional classes merged onto the Popover.Content panel.