CurrencyPairSelector

stable

Currency pair selector supporting predefined pairs or free-select from full currency list

import { CurrencyPairSelector } from "@nodus/design-system/finance"

Loading demo…

Props

Prop	Type	Default	Description
`base`req	`string`	—	Current base currency
`quote`req	`string`	—	Current quote currency
`pairs`	`CurrencyPairOption[]`	—	Predefined pairs (omit for free-select mode)
`onChange`	`(base: string, quote: string) => void`	—	Callback on pair change
`density`	`"default" \| "compact"`	—	Display density
`disabled`	`boolean`	—	Disabled state

baserequired

Type stringDefault —

Current base currency

quoterequired

Type stringDefault —

Current quote currency

pairs

Type CurrencyPairOption[]Default —

Predefined pairs (omit for free-select mode)

onChange

Type (base: string, quote: string) => voidDefault —

Callback on pair change

density

Type "default" | "compact"Default —

Display density

disabled

Type booleanDefault —

Disabled state

MobileTouch Target

Dropdown trigger must be ≥44px. On mobile, use native select or a bottom-sheet picker for the currency list.

Design Rationale

This component was designed to express:

Currency pair display with mid-rate for FX trading and treasury

FX rate card with bid/ask, spread, daily change, and sparkline

Was this helpful?