Select Currency

ProNew

A currency select with codes first, the code alone in the trigger and a formatted sample amount under the field from Intl.NumberFormat that shows symbol and separators before you choose.

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.

sample123456

locale, label

Guide and examples

When to use it

Use this for billing settings, price lists and invoices where the currency changes how amounts look.

Do not use it for more than about thirty currencies (use a searchable combobox) or to convert amounts.

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

SelectCurrency

Prop	Type	Default	Description
`currencies`	`{ code, name }[]`	-	Offered currencies.
`value / onValueChange`	`string / fn`	-	Chosen ISO code.
`sample`	`number`	`123456`	Example amount in cents.
`locale, label`	`string`	`en-US, Currency`	Formatting locale and label.

Accessibility

Typeahead uses the code (textValue), so typing "g" finds GBP although each row also shows the name.
The example ("Example: 1.234,56 €") is the field's accessible description, so the effect of the choice is read with it.
Formatting uses Intl.NumberFormat with the locale prop; an unknown code simply hides the example.

Keyboard

Key	Action
Enter or Space	opens the list
Type a code letter	jumps to it
Enter	chooses

Testing

The pattern ships a Testing Library test (select-currency.test.tsx) that covers the localised example as description, the list, updating the example and typeahead.

Guide and examples

When to use it

Use this for billing settings, price lists and invoices where the currency changes how amounts look.

Do not use it for more than about thirty currencies (use a searchable combobox) or to convert amounts.

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

SelectCurrency

Prop	Type	Default	Description
`currencies`	`{ code, name }[]`	-	Offered currencies.
`value / onValueChange`	`string / fn`	-	Chosen ISO code.
`sample`	`number`	`123456`	Example amount in cents.
`locale, label`	`string`	`en-US, Currency`	Formatting locale and label.

Accessibility

Typeahead uses the code (textValue), so typing "g" finds GBP although each row also shows the name.
The example ("Example: 1.234,56 €") is the field's accessible description, so the effect of the choice is read with it.
Formatting uses Intl.NumberFormat with the locale prop; an unknown code simply hides the example.

Keyboard

Key	Action
Enter or Space	opens the list
Type a code letter	jumps to it
Enter	chooses

Testing

The pattern ships a Testing Library test (select-currency.test.tsx) that covers the localised example as description, the list, updating the example and typeahead.