CurrencyCombobox
A searchable currency choice by ISO 4217 code, from the list and names your application supplies.
Currency picks a currency. The value is its ISO 4217 code; the reader sees EUR - Euro
and can search on the code or the name. It is a thin layer over
SearchCombobox, which does the menu, search and keyboard.
Value: EUR
// apps/docs/examples/ui/currency-combobox.tsx'use client';
import {useMemo, useState} from 'react';
import {CurrencyCombobox} from '@workspace/active-ui/components/composed/currency-combobox';import { Field, FieldDescription, FieldLabel,} from '@workspace/active-ui/components/primitives/field';
// The list and its order are the application's: here the euro first.const CODES = ['EUR', 'USD', 'GBP', 'CHF', 'SEK', 'DKK', 'NOK', 'PLN', 'JPY'];
/** * A currency by its ISO 4217 code. The names come from the browser's * `Intl.DisplayNames`, in the reader's language; the code is shown first * and is searchable too (try "fr" for the Swiss franc). */export default function CurrencyComboboxExample() { const [currency, setCurrency] = useState('EUR'); const options = useMemo(() => { const names = new Intl.DisplayNames(['en'], {type: 'currency'}); return CODES.map((code) => ({code, name: names.of(code) ?? code})); }, []); return ( <Field className="w-full max-w-xs"> <FieldLabel htmlFor="currency">Currency</FieldLabel> <CurrencyCombobox id="currency" value={currency} onValueChange={setCurrency} options={options} locale="en" placeholder="Choose a currency" searchLabel="Search currencies" searchPlaceholder="Search…" emptyText="No currency found." aria-describedby="currency-value" /> <FieldDescription id="currency-value"> Value: <code>{currency || "''"}</code> </FieldDescription> </Field> );}What the composition adds#
A code as the value,
''when nothing is chosen.The code is searchable next to the name, and shown first with
show(defaultCode true).
It owns no list, no names, no order and no default: there is no built-in set of currencies.
Usage#
import {CurrencyCombobox} from '@workspace/active-ui/components/composed/currency-combobox';
<CurrencyCombobox id="currency" value={currency} // 'EUR' or '' onValueChange={setCurrency} options={[{code: 'EUR', name: 'Euro'}]} locale="en" placeholder="Choose a currency" searchLabel="Search currencies" searchPlaceholder="Search…" emptyText="No currency found."/>;What your application provides#
The currencies in the order to show, with names in the reader's language, for example from
Intl.as in the example. A stored code you no longer offer stays selectable only when it stays in the list.Display Names A default, set in the form, and whether the field is required.
Accessibility#
As SearchCombobox: name the button with Field
its id.
API#
Import from @workspace/
Props
- Type
string
Text when the search finds nothing. Supplied translated.
- Type
string
The reader's language, for matching the query against names and codes. It does not produce the names: those arrive in options.
- Type
readonly CurrencyCombobox Option[]
Every currency to choose from, in the order they are shown.
Required, and there is no built-in list: which currencies a product offers, their names, and which come first (a priority block, the currencies of a country) are the host's. A stored code the runtime no longer knows stays selectable only when the caller keeps it in this list.
- Type
string
Button text while nothing is chosen. Supplied translated.
- Type
string
Accessible name of the search field in the menu. Supplied translated.
- Type
string
Text in the search field. Supplied translated.
- Type
string
The chosen code, or '' when nothing is chosen.
- Type
string
The ids of the description and error of the field, on the button.
- Type
"false""grammar""spelling""true"boolean
The validation state of the field, on the button.
- Type
string
Classes for the button.
- Type
boolean- Default
false
Disables the button.
- Type
string
The id of the button, for <Field.
- Type
boolean- Default
false
Shows the choice without allowing a change; see Search.
- Type
boolean- Default
false
Marks the choice as required for assistive technology. Whether it is required, and when (only once an amount is entered, say), is the caller's schema; this component blocks nothing.
- Type
boolean- Default
true
Shows the code before the name (EUR - Euro). Default true: a currency field stores a code and its reader usually knows it. Off, the code still takes part in searching.
Events
Called by the component when something happens.
- Type
(value: string) => void
Receives the chosen code, or '' when the choice is cleared.
Takes only the props listed.
Types
One currency the caller offers.
Three separate things meet here and none follows from another: the code is DATA (the ISO 4217 identity a record stores), the name is text in the reader's language (how the code is called), and how an AMOUNT in this currency is written is the presentation's business, not this picker's.
interface CurrencyComboboxOption {
code: string;
name: string;
}The props of Currency, each described in its prop list on this page.
interface CurrencyComboboxProps {
value: string;
onValueChange: (value: string) => void;
options: readonly CurrencyComboboxOption[];
locale: LocaleCode;
showCode?: boolean;
placeholder: string;
searchLabel: string;
searchPlaceholder: string;
emptyText: string;
disabled?: boolean;
readOnly?: boolean;
required?: boolean;
className?: string;
id?: string;
'aria-describedby'?: string;
'aria-invalid'?: AriaAttributes['aria-invalid'];
}