Stays Currency Picker

Currency Picker

The currency rates are shown in: a small pill (the sign and the code) that opens a searchable list, a sheet from the bottom on a phone.

Preview

Rates in Indian rupee

Usage

tsx

import { CurrencyPicker } from "zostel-ui";

<CurrencyPicker
  currencies={[{ code: "INR", name: "Indian rupee", symbol: "₹" }, …]}
  value={code}
  onValueChange={setCode}
  note="Shown in your currency for reference; you pay in rupees."
/>

Props

Prop	Type	Default	Description
`currencies`	`CurrencyOption[]: { code: string; name: string; symbol: string }`	—	The list, in the order to show it. The current one carries the check (and says so to a screen reader).
`value · onValueChange`	`string · (code) => void`	—	The code shown, and the pick.
`note`	`ReactNode`	—	Under the list: what the choice changes, and what it doesn’t.
`title`	`string`	`"Show rates in"`	The list’s name: the sheet’s title on a phone, and what a screen reader hears for the search and the list.
`aria-label · aria-labelledby`	`string`	`"Currency"`	The field’s name, read before the code it shows (“Currency, INR, Indian rupee”).
`className`	`string`	—	More classes on the pill.

currencies

Type: CurrencyOption[]: { code: string; name: string; symbol: string }

Default: —

The list, in the order to show it. The current one carries the check (and says so to a screen reader).

value · onValueChange

Type: string · (code) => void

Default: —

The code shown, and the pick.

note

Type: ReactNode

Default: —

Under the list: what the choice changes, and what it doesn’t.

title

Type: string

Default: "Show rates in"

The list’s name: the sheet’s title on a phone, and what a screen reader hears for the search and the list.

aria-label · aria-labelledby

Type: string

Default: "Currency"

The field’s name, read before the code it shows (“Currency, INR, Indian rupee”).

className

Type: string

Default: —

More classes on the pill.

On zostel.com

Beside every rate: in the booking bar, the summary and the footer. Type to find, the arrow keys move, Enter picks, Escape closes and the focus goes back to the pill.