Currency Picker Symbols

ProNew

A currency picker that pins the common currencies, searches by code, name or symbol (type € or kr), and shows code and symbol in the field. Use this when people choose the currency of a price, invoice or account.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

disabled

Guide and examples

When to use it

Use it for pricing, invoicing and payout settings, where most people want one of four currencies and the rest must still be reachable by typing the code, the name or the symbol they remember.

Do not use it when the list is two or three currencies. A segmented control or radio group is faster there.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`value`	`string`	-	The selected ISO 4217 code (controlled).
`defaultValue`	`string`	-	Initial code.
`onValueChange`	`(code: string) => void`	-	Runs when a currency is picked.
`currencies`	`Currency[]`	22 currencies	`{ code, name, symbol }`.
`pinned`	`string[]`	`USD, EUR, GBP, JPY`	Codes listed first under Common currencies.
`disabled`	`boolean`	`false`	Disables the button.

Accessibility

The button is a combobox with aria-expanded; its name is the chosen code and symbol, or the placeholder.
The list is the cmdk listbox; groups are labelled Common currencies and All currencies.
While a query is typed the pinned group is removed, so the same currency is never two options.
Symbols are text, not images, and are matched by the search.

Testing

The pattern ships with a Testing Library test (currency-picker-symbols.test.tsx) that covers pinned and searching behaviour, matching by symbol and by name, and selecting.