Currency Input

When to avoid

• Displaying prices (read-only) – Use formatted text, not an input.
• Quantities without monetary meaning – Use a number input instead.
• Very large or very small scientific values – Use a standard number input with appropriate notation.
• When the currency is irrelevant – A plain number input is simpler.

Implementation workflow

1. Confirm the pattern matches the problem and constraints before copying the example.
2. Start from the anatomy and examples in references/pattern.md, then choose the smallest viable variation.
3. Apply accessibility, performance, and interaction guardrails before layering visual polish.
4. Use the testing guidance to verify behavior across keyboard, screen reader, responsive, and failure scenarios.

Accessibility guardrails

Keyboard Interaction Pattern

Performance guardrails

• Initial render: < 80ms for currency input appearance
• Format-on-blur: < 16ms for value formatting
• Currency selector change: < 50ms to update symbol and placeholder
• Validation feedback: < 150ms after blur
• Memory usage: < 5KB per currency input instance

Common mistakes

Using type="number" for Currency

The Problem: <input type="number"> shows browser spinner arrows, rejects thousands separators (commas), and handles decimals inconsistently across browsers and locales.

<!-- Bad -->
<input type="number" step="0.01" min="0" />

How to Fix It? Use type="text" with inputmode="decimal".

<!-- Good -->
<input type="text" inputmode="decimal" pattern="[0-9]*[.,]?[0-9]{0,2}" />

Formatting While User Is Typing

The Problem: Reformatting the value on input events moves the cursor unexpectedly, especially when adding thousands separators mid-entry.

How to Fix It? Format only on blur; show raw decimal input during typing.

input.addEventListener('blur', () => {
  const raw = parseFloat(input.value.replace(/[^0-9.-]/g, ''));
  if (!isNaN(raw)) {
    input.value = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    }).format(raw);
  }
});

input.addEventListener('focus', () => {
  // Strip formatting for editing
  input.value = input.value.replace(/[^0-9.]/g, '');
});

Submitting Formatted Value to Server

The Problem: Sending "$1,299.99" to a backend that expects 1299.99 (or 129999 as integer cents) causes parse errors or incorrect amounts.

How to Fix It? Use a hidden input for the raw value, or strip formatting before submission.

<input type="text" id="amount-display" value="$1,299.99" />
<input type="hidden" id="amount-raw" name="amount" value="1299.99" />

form.addEventListener('submit', () => {
  const raw = parseFloat(displayInput.value.replace(/[^0-9.]/g, ''));
  hiddenInput.value = raw.toFixed(2);
});

Related patterns

• https://uxpatterns.dev/patterns/forms/text-field

For full implementation detail, examples, and testing notes, see references/pattern.md.

Pattern page: https://uxpatterns.dev/patterns/forms/currency-input