CurrencySelect

ISO 4217 currency picker built on Select, with type-ahead and a GBP-first common group.

<CurrencySelect defaultValue="GBP" className="w-80 max-w-full" />

Usage

import { CurrencySelect } from "@reva/ui";

CurrencySelect is a closed, prop-driven currency picker built on Select. It ships the full ISO 4217 list (GBP/EUR/USD pinned to a "Common" group), filters by Radix native type-ahead (type a code), and reports both the selected ISO code and the full currency object.

<CurrencySelect
  defaultValue="GBP"
  onValueChange={(code) => console.log(code)}
  onCurrencySelect={(currency) => console.log(currency.symbol, currency.decimals)}
/>

Examples

Custom currencies

Pass currencies (ISO codes or Currency objects) to show a curated subset. A custom list is treated as already curated, so the "Common" group is skipped.

<CurrencySelect  placeholder="Select a currency"  currencies={["AUD", "CAD", "DKK", "EUR", "NZD", "NOK", "GBP", "SEK", "USD"]}  className="w-80 max-w-full"/>

Sizes

The trigger scale matches Select: sm and default.

<VStack gap={3} align="start">  <CurrencySelect size="sm" defaultValue="GBP" className="w-80 max-w-full" />  <CurrencySelect size="default" defaultValue="GBP" className="w-80 max-w-full" /></VStack>

Variants

default, secondary, and ghost triggers — ghost suits a compact chip.

<HStack gap={3} align="center" wrap="wrap">  <CurrencySelect variant="default" defaultValue="GBP" />  <CurrencySelect variant="secondary" defaultValue="EUR" />  <CurrencySelect variant="ghost" defaultValue="USD" /></HStack>

Disabled

<CurrencySelect disabled defaultValue="GBP" className="w-80 max-w-full" />

Controlled

Drive the value with value + onValueChange; onCurrencySelect hands you the full Currency.

Selected: GBP · Pound sterling · £

function ControlledCurrency() {  const [code, setCode] = React.useState("GBP");  const [currency, setCurrency] = React.useState(getCurrency("GBP"));  return (    <VStack gap={3} align="start">      <CurrencySelect        value={code}        onValueChange={setCode}        onCurrencySelect={setCurrency}        className="w-80 max-w-full"      />      <Text size="sm" color="muted-foreground">        Selected: {currency ? `${currency.code} · ${currency.name} · ${currency.symbol}` : "none"}      </Text>    </VStack>  );}

In a Field

Compose with Field for a label, description, and error.

<Field data-invalid className="w-80 max-w-full">  <FieldLabel htmlFor="currency-field">Settlement currency</FieldLabel>  <CurrencySelect id="currency-field" aria-invalid placeholder="Select currency" />  <FieldDescription>{"The currency this account settles in."}</FieldDescription>  <FieldError errors={[{ message: "Please choose a currency." }]} /></Field>

Currency amount input

A compact ghost CurrencySelect inside an InputGroup beside a numeric input; the trailing addon shows the selected currency's symbol.

Enter an amount in the selected currency.

function CurrencyAmountInput() {  const [code, setCode] = React.useState("GBP");  const symbol = getCurrency(code)?.symbol ?? "";  return (    <InputGroup className="w-80 max-w-full">      <InputGroupAddon align="inline-start" className="pl-1">        <CurrencySelect variant="ghost" size="sm" value={code} onValueChange={setCode} />      </InputGroupAddon>      <InputGroupInput type="number" inputMode="decimal" placeholder="0" />      <InputGroupAddon align="inline-end">        <InputGroupText>{symbol}</InputGroupText>      </InputGroupAddon>    </InputGroup>  );}

Accessibility

Built on Radix Select: full keyboard support (Enter/Space/arrows to open, ↑/↓ to move, Esc to close) and correct combobox/listbox roles and selection state.
Type-ahead: rows lead with the ISO code, so pressing keys jumps to the matching currency (e.g. type usd).
Label it with a FieldLabel htmlFor matching the component id, or pass aria-label.
aria-invalid (or a wrapping Field data-invalid) renders the error ring.
With a name, the selected ISO code is submitted via Radix's hidden input.

Props

Prop	Type	Default	Description
`value`	`string`	—	Controlled selected ISO code.
`defaultValue`	`string`	—	Uncontrolled initial ISO code.
`onValueChange`	`(code: string) => void`	—	Fires with the selected ISO code.
`onCurrencySelect`	`(currency: Currency) => void`	—	Fires with the full `Currency` object.
`currencies`	`(Currency \| string)[]`	full ISO list	Currencies to show (codes or objects); a custom list disables the "Common" group.
`priorityCurrencies`	`string[]`	`["GBP","EUR","USD"]`	Codes pinned to the "Common" group (full list only). `[]` disables.
`placeholder`	`string`	`"Select currency"`	Trigger placeholder.
`size`	`"sm" \| "default"`	`"default"`	Trigger scale.
`variant`	`"default" \| "secondary" \| "ghost"`	`"default"`	Trigger visual.
`disabled`	`boolean`	`false`	Disables the control.
`name`	`string`	—	Form field name; submits the ISO code.
`id`	`string`	—	Associates with a `FieldLabel htmlFor`.
`aria-invalid`	`boolean \| "true"`	—	Error ring (composes with `Field data-invalid`).
`className`	`string`	—	Trigger className (`w-fit` by default; set `w-full`/`w-80`).

CurrencySelect

On this page