Currency Input

Formatted currency input with prefix/suffix symbol, sizes, display mode, and validation states.

Prefix Symbol

Preview

<div class="currency-input currency-input-prefix">
  <span class="currency-input-symbol currency-input-symbol-prefix">$</span>
  <input class="input" type="text" inputmode="decimal" placeholder="0.00" value="1,250.00" />
</div>

Requires: ux.min.css

<div class="relative inline-flex items-center w-full">
  <span class="absolute left-3 flex items-center justify-center h-full min-w-8 text-base-content/60 font-medium pointer-events-none select-none">$</span>
  <input class="input pl-10 tabular-nums" type="text" inputmode="decimal" placeholder="0.00" value="1,250.00" />
</div>

Requires: tw.min.css

// Format on blur:
// input.addEventListener('blur', () => {
//   const val = parseFloat(input.value.replace(/[^0-9.-]/g, ''));
//   if (!isNaN(val)) input.value = val.toLocaleString('en-US', { minimumFractionDigits: 2 });
// });

Suffix Symbol

Preview

EUR

<div class="currency-input currency-input-suffix">
  <input class="input" type="text" inputmode="decimal" placeholder="0.00" value="1,250.00" />
  <span class="currency-input-symbol currency-input-symbol-suffix">EUR</span>
</div>

Requires: ux.min.css

<div class="relative inline-flex items-center w-full">
  <input class="input pr-14 tabular-nums" type="text" inputmode="decimal" placeholder="0.00" value="1,250.00" />
  <span class="absolute right-3 flex items-center justify-center h-full min-w-8 text-base-content/60 font-medium pointer-events-none select-none">EUR</span>
</div>

Requires: tw.min.css

// No JavaScript required for static display

Sizes

Preview

<!-- Small -->
<div class="currency-input currency-input-prefix currency-input-sm mb-3">
  <span class="currency-input-symbol currency-input-symbol-prefix">$</span>
  <input class="input" type="text" inputmode="decimal" placeholder="0.00" />
</div>

<!-- Default -->
<div class="currency-input currency-input-prefix mb-3">
  <span class="currency-input-symbol currency-input-symbol-prefix">$</span>
  <input class="input" type="text" inputmode="decimal" placeholder="0.00" />
</div>

<!-- Large -->
<div class="currency-input currency-input-prefix currency-input-lg">
  <span class="currency-input-symbol currency-input-symbol-prefix">$</span>
  <input class="input" type="text" inputmode="decimal" placeholder="0.00" />
</div>

Requires: ux.min.css

<!-- Small -->
<div class="relative inline-flex items-center w-full mb-3">
  <span class="absolute left-3 flex items-center h-full text-sm text-base-content/60 font-medium pointer-events-none">$</span>
  <input class="input pl-8 h-9 text-sm tabular-nums" type="text" inputmode="decimal" placeholder="0.00" />
</div>

<!-- Default -->
<div class="relative inline-flex items-center w-full mb-3">
  <span class="absolute left-3 flex items-center h-full text-base-content/60 font-medium pointer-events-none">$</span>
  <input class="input pl-10 tabular-nums" type="text" inputmode="decimal" placeholder="0.00" />
</div>

<!-- Large -->
<div class="relative inline-flex items-center w-full">
  <span class="absolute left-3 flex items-center h-full text-lg text-base-content/60 font-medium pointer-events-none">$</span>
  <input class="input pl-12 h-[3.25rem] text-lg tabular-nums" type="text" inputmode="decimal" placeholder="0.00" />
</div>

Requires: tw.min.css

// No JavaScript required for sizing

Text Alignment

Preview

<div class="currency-input currency-input-prefix currency-input-align-right">
  <span class="currency-input-symbol currency-input-symbol-prefix">$</span>
  <input class="input" type="text" inputmode="decimal" value="9,999.99" />
</div>

Requires: ux.min.css

<div class="relative inline-flex items-center w-full">
  <span class="absolute left-3 flex items-center h-full text-base-content/60 font-medium pointer-events-none">$</span>
  <input class="input pl-10 text-right tabular-nums" type="text" inputmode="decimal" value="9,999.99" />
</div>

Requires: tw.min.css

// No JavaScript required

Display Mode

Preview

<div class="currency-input currency-input-display currency-input-prefix">
  <span class="currency-input-symbol currency-input-symbol-prefix">$</span>
  <input class="input" type="text" value="24,500.00" readonly />
</div>

Requires: ux.min.css

<div class="inline-flex items-center text-3xl font-semibold">
  <span class="text-xl font-normal mr-1 text-base-content/60">$</span>
  <input class="h-auto p-0 border-none bg-transparent text-3xl font-semibold outline-none tabular-nums" type="text" value="24,500.00" readonly />
</div>

Requires: tw.min.css

// No JavaScript required — read-only display

Validation States

Preview

Amount

Amount must be positive

Amount

Looks good!

<!-- Error -->
<div class="currency-input-field mb-4">
  <label class="currency-input-label">Amount</label>
  <div class="currency-input currency-input-prefix currency-input-error">
    <span class="currency-input-symbol currency-input-symbol-prefix">$</span>
    <input class="input" type="text" inputmode="decimal" value="-50" />
  </div>
  <span class="currency-input-helper currency-input-helper-error">Amount must be positive</span>
</div>

<!-- Success -->
<div class="currency-input-field">
  <label class="currency-input-label">Amount</label>
  <div class="currency-input currency-input-prefix currency-input-success">
    <span class="currency-input-symbol currency-input-symbol-prefix">$</span>
    <input class="input" type="text" inputmode="decimal" value="100.00" />
  </div>
  <span class="currency-input-helper">Looks good!</span>
</div>

Requires: ux.min.css

<!-- Error -->
<div class="flex flex-col gap-1 mb-4">
  <label class="text-sm font-medium text-base-content">Amount</label>
  <div class="relative inline-flex items-center w-full">
    <span class="absolute left-3 flex items-center h-full text-base-content/60 font-medium pointer-events-none">$</span>
    <input class="input pl-10 tabular-nums border-error focus:ring-3 focus:ring-error/15" type="text" inputmode="decimal" value="-50" />
  </div>
  <span class="text-xs text-error">Amount must be positive</span>
</div>

<!-- Success -->
<div class="flex flex-col gap-1">
  <label class="text-sm font-medium text-base-content">Amount</label>
  <div class="relative inline-flex items-center w-full">
    <span class="absolute left-3 flex items-center h-full text-base-content/60 font-medium pointer-events-none">$</span>
    <input class="input pl-10 tabular-nums border-success focus:ring-3 focus:ring-success/15" type="text" inputmode="decimal" value="100.00" />
  </div>
  <span class="text-xs text-base-content/60">Looks good!</span>
</div>

Requires: tw.min.css

// Validate and toggle error:
// if (val < 0) wrapper.classList.add('currency-input-error');
// else wrapper.classList.remove('currency-input-error');

Class	Description
`.currency-input`	Container (inline-flex)
`.currency-input-symbol`	Currency symbol element
`.currency-input-symbol-prefix`	Left-aligned symbol
`.currency-input-symbol-suffix`	Right-aligned symbol
`.currency-input-prefix`	Wrapper modifier for prefix padding
`.currency-input-suffix`	Wrapper modifier for suffix padding
`.currency-input-sm`	Small size
`.currency-input-lg`	Large size
`.currency-input-align-left`	Left-align text
`.currency-input-align-center`	Center-align text
`.currency-input-align-right`	Right-align text
`.currency-input-display`	Large read-only display mode
`.currency-input-error`	Error state
`.currency-input-success`	Success state
`.currency-input-field`	Field wrapper (label + helper)
`.currency-input-label`	Field label
`.currency-input-helper`	Helper text
`.currency-input-helper-error`	Error helper text
`.currency-input.glass`	Glass morphism variant