"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface CurrencyOption {
  code: string;
  symbol: string;
  name?: string;
}

export interface CurrencyInputProps
  extends React.HTMLAttributes<HTMLDivElement> {
  value?: string;
  defaultValue?: string;
  currency?: string;
  defaultCurrency?: string;
  onValueChange?: (value: string) => void;
  onCurrencyChange?: (currency: string) => void;
  label?: string;
  placeholder?: string;
  options?: CurrencyOption[];
}

const defaultCurrencies: CurrencyOption[] = [
  { code: "USD", symbol: "$", name: "US Dollar" },
  { code: "EUR", symbol: "€", name: "Euro" },
  { code: "GBP", symbol: "£", name: "British Pound" },
  { code: "JPY", symbol: "¥", name: "Japanese Yen" },
];

export function CurrencyInput({
  value,
  defaultValue = "",
  currency,
  defaultCurrency,
  onValueChange,
  onCurrencyChange,
  label,
  placeholder = "0.00",
  options = defaultCurrencies,
  className,
  ...props
}: CurrencyInputProps) {
  const isValueControlled = value !== undefined;
  const isCurrencyControlled = currency !== undefined;
  const [internalValue, setInternalValue] = React.useState(defaultValue);
  const [internalCurrency, setInternalCurrency] = React.useState(
    defaultCurrency ?? options[0]?.code ?? "USD"
  );

  const selectedCurrency =
    options.find((option) => option.code === (currency ?? internalCurrency)) ??
    options[0];
  const inputValue = isValueControlled ? value ?? "" : internalValue;

  const handleValueChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const nextValue = event.target.value;
    if (!isValueControlled) {
      setInternalValue(nextValue);
    }
    onValueChange?.(nextValue);
  };

  const handleCurrencyChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const nextCurrency = event.target.value;
    if (!isCurrencyControlled) {
      setInternalCurrency(nextCurrency);
    }
    onCurrencyChange?.(nextCurrency);
  };

  return (
    <div className={cn("w-full max-w-md space-y-2", className)} {...props}>
      {label ? (
        <label className="text-sm font-medium text-foreground">{label}</label>
      ) : null}
      <div className="flex w-full gap-2">
        <div className="relative">
          <select
            value={selectedCurrency?.code}
            onChange={handleCurrencyChange}
            className={cn(
              "h-10 appearance-none rounded-lg border border-border bg-card px-3 pr-8 text-sm text-foreground",
              "transition focus-visible:outline-none"
            )}
            aria-label="Currency"
          >
            {options.map((option) => (
              <option key={option.code} value={option.code}>
                {option.code} {option.symbol}
              </option>
            ))}
          </select>
          <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
            ▼
          </span>
        </div>
        <div className="relative flex-1">
          <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
            {selectedCurrency?.symbol}
          </span>
          <input
            type="text"
            inputMode="decimal"
            value={inputValue}
            onChange={handleValueChange}
            placeholder={placeholder}
            className={cn(
              "h-10 w-full rounded-lg border border-border bg-card pl-8 pr-3 text-sm text-foreground",
              "placeholder:text-muted-foreground focus-visible:outline-none"
            )}
          />
        </div>
      </div>
    </div>
  );
}
Currency Input

Dependencies

Files

Installation
