Currency Switcher

Beta

Get Ritla UI

Wallets in several currencies, each with its flag and balance; the chosen one is raised.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add currency-switcher
Also works with shadcn: npx shadcn@latest add @ritla/currency-switcher
Dependencies it brings
@base-ui/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

currency-switcher.tsx

import { CurrencySwitcher } from "@/components/ui/currency-switcher";<CurrencySwitcher aria-label="Wallet" wallets={[{ code: "JOD", country: "JO", balance: "2,450.750" }, { code: "USD", country: "US", balance: "3,455.12" }]} />

API reference

CurrencySwitcher

Prop	Type	Default	Description
`wallets`	`{ code, country, balance? }[]`	None	The wallets: code, flag country (ISO) and balance.
`aria-label`	`string`	None	Names the choice.
`value / defaultValue / onValueChange`	`string`	None	The chosen currency code. Default the first.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowLeftArrowRight`	Chooses the previous or next wallet (ArrowLeft is next in RTL).

ARIA

A radio group; the currency code is each option's name.

Arabic and RTL notes

Mirrors

The wallets start from the right.

Does not mirror

Flags and balances.

Numerals: Figures the app formats (prices, balances) arrive as text; the component keeps them left to right with <bdi dir="ltr">.
Arabic typography: label-12 Medium code, numeric-12 balance.