Currency Inputs
Formatted money fields, currency selectors and price prefix inputs.
Standard Currency Input
$
USD
Enter the total amount in US Dollars.
<div class="uk-currency-field">
<label class="uk-currency-label">Amount</label>
<div class="uk-currency-input-wrap">
<span class="uk-currency-symbol">$</span>
<input type="text" class="uk-currency-input" placeholder="0.00" value="1,250.00">
<span class="uk-currency-code">USD</span>
</div>
<span class="uk-currency-hint">Enter the total amount in US Dollars.</span>
</div>
<style>
.uk-currency-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
text-align: left;
}
.uk-currency-label {
font-size: 0.8rem;
font-weight: 700;
color: #334155;
}
.uk-currency-input-wrap {
position: relative;
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 0.6rem;
transition: all 0.15s;
}
.uk-currency-input-wrap:focus-within {
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.uk-currency-symbol {
position: absolute;
left: 1rem;
font-size: 1rem;
font-weight: 700;
color: #94a3b8;
pointer-events: none;
}
.uk-currency-input {
width: 100%;
border: none;
outline: none;
background: transparent;
padding: 0.75rem 3.5rem 0.75rem 2.25rem;
font-size: 1rem;
font-weight: 700;
color: #0b1b2f;
font-family: inherit;
}
.uk-currency-code {
position: absolute;
right: 1rem;
font-size: 0.75rem;
font-weight: 800;
color: #94a3b8;
background: #f1f5f9;
padding: 0.2rem 0.4rem;
border-radius: 0.3rem;
pointer-events: none;
}
.uk-currency-hint {
font-size: 0.72rem;
color: #94a3b8;
}
</style>
Currency Input with Dropdown
<div class="uk-currency-field">
<label class="uk-currency-label">Price</label>
<div class="uk-currency-input-wrap uk-currency-has-select">
<select class="uk-currency-select">
<option value="USD" selected>$ USD</option>
<option value="EUR">€ EUR</option>
<option value="GBP">£ GBP</option>
<option value="JPY">¥ JPY</option>
</select>
<input type="number" class="uk-currency-input uk-currency-input-right" placeholder="0.00" value="499.00">
</div>
</div>
<style>
.uk-currency-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
text-align: left;
}
.uk-currency-label {
font-size: 0.8rem;
font-weight: 700;
color: #334155;
}
.uk-currency-input-wrap {
position: relative;
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 0.6rem;
transition: all 0.15s;
}
.uk-currency-input-wrap:focus-within {
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.uk-currency-has-select {
padding: 0;
}
.uk-currency-select {
border: none;
border-right: 1px solid #e2e8f0;
background: #f8fafc;
padding: 0.75rem 1rem;
font-size: 0.85rem;
font-weight: 700;
color: #0b1b2f;
outline: none;
cursor: pointer;
font-family: inherit;
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.uk-currency-input-right {
width: 100%;
border: none;
outline: none;
background: transparent;
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: 700;
color: #0b1b2f;
font-family: inherit;
text-align: right;
}
/* Hide arrows from number input */
.uk-currency-input-right::-webkit-outer-spin-button,
.uk-currency-input-right::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.uk-currency-input-right[type=number] {
-moz-appearance: textfield;
}
</style>
Large Formatted Currency Input
$
<div class="uk-currency-large">
<label class="uk-currency-large-label">Transfer amount</label>
<div class="uk-currency-large-wrap">
<span class="uk-currency-large-symbol">$</span>
<input type="text" class="uk-currency-large-input" placeholder="0" value="15,000.50">
</div>
<div class="uk-currency-large-footer">
<span>Available balance: <strong>$24,500.00</strong></span>
<button type="button" class="uk-currency-max-btn">Max</button>
</div>
</div>
<style>
.uk-currency-large {
display: flex;
flex-direction: column;
gap: 0.5rem;
text-align: left;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 4px 14px rgba(30,58,138,0.04);
}
.uk-currency-large-label {
font-size: 0.85rem;
font-weight: 700;
color: #64748b;
}
.uk-currency-large-wrap {
display: flex;
align-items: baseline;
gap: 0.25rem;
border-bottom: 2px solid #e2e8f0;
padding-bottom: 0.5rem;
transition: border-color 0.15s;
}
.uk-currency-large-wrap:focus-within {
border-color: #1e3a8a;
}
.uk-currency-large-symbol {
font-size: 2rem;
font-weight: 700;
color: #94a3b8;
}
.uk-currency-large-input {
width: 100%;
border: none;
outline: none;
background: transparent;
font-size: 2.5rem;
font-weight: 800;
color: #0b1b2f;
font-family: inherit;
letter-spacing: -0.02em;
padding: 0;
}
.uk-currency-large-input::placeholder {
color: #cbd5e1;
}
.uk-currency-large-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
font-size: 0.8rem;
color: #64748b;
}
.uk-currency-large-footer strong {
color: #0b1b2f;
font-weight: 800;
}
.uk-currency-max-btn {
background: #eff6ff;
color: #1e3a8a;
border: none;
border-radius: 0.4rem;
padding: 0.3rem 0.6rem;
font-size: 0.75rem;
font-weight: 800;
cursor: pointer;
transition: background 0.15s;
font-family: inherit;
}
.uk-currency-max-btn:hover {
background: #dbeafe;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Add thousands separators and 2 decimals on blur for large inputs
document.querySelectorAll('.uk-currency-large-input').forEach(function (input) {
input.addEventListener('blur', function () {
var val = parseFloat(input.value.replace(/,/g, ''));
if (!isNaN(val)) {
input.value = val.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
});
});
});
</script>
Split Currency Input
$
.
<div class="uk-currency-split">
<label class="uk-currency-label">Ticket Price</label>
<div class="uk-currency-split-wrap">
<span class="uk-currency-symbol uk-currency-symbol-static">$</span>
<input type="text" class="uk-currency-split-int" placeholder="0" value="99">
<span class="uk-currency-split-dot">.</span>
<input type="text" class="uk-currency-split-dec" placeholder="00" maxlength="2" value="99">
</div>
</div>
<style>
.uk-currency-split {
display: flex;
flex-direction: column;
gap: 0.4rem;
text-align: left;
}
.uk-currency-label {
font-size: 0.8rem;
font-weight: 700;
color: #334155;
}
.uk-currency-split-wrap {
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 0.6rem;
transition: all 0.15s;
padding: 0.75rem 1rem;
}
.uk-currency-split-wrap:focus-within {
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.uk-currency-symbol-static {
font-size: 1rem;
font-weight: 700;
color: #94a3b8;
margin-right: 0.25rem;
}
.uk-currency-split-int {
width: 60px;
border: none;
outline: none;
background: transparent;
font-size: 1.15rem;
font-weight: 800;
color: #0b1b2f;
font-family: inherit;
text-align: right;
}
.uk-currency-split-dot {
font-size: 1.15rem;
font-weight: 800;
color: #94a3b8;
margin: 0 0.2rem;
}
.uk-currency-split-dec {
width: 30px;
border: none;
outline: none;
background: transparent;
font-size: 1.15rem;
font-weight: 800;
color: #64748b; /* lighter than integer */
font-family: inherit;
}
</style>