Number Steppers
Quantity steppers, spin buttons and increment/decrement controls.
Basic Quantity Stepper
<div class="uk-num-group">
<button class="uk-num-btn uk-num-minus">−</button>
<input type="number" class="uk-num-input" value="1" min="1">
<button class="uk-num-btn uk-num-plus">+</button>
</div>
<style>
.uk-num-group {
display: flex; border: 1px solid #cbd5e1;
border-radius: 0.5rem; overflow: hidden; background: #fff;
}
.uk-num-btn {
width: 40px; height: 40px; border: none; background: #f8fafc;
font-size: 1.25rem; color: #475569; cursor: pointer;
transition: background 0.15s;
display: flex; align-items: center; justify-content: center;
}
.uk-num-btn:hover { background: #e2e8f0; }
.uk-num-input {
flex: 1; width: 100%; text-align: center; border: none;
outline: none; font-weight: 600; color: #0f172a;
font-size: 0.95rem; border-left: 1px solid #cbd5e1;
border-right: 1px solid #cbd5e1;
-moz-appearance: textfield;
background: #fff;
}
.uk-num-input::-webkit-inner-spin-button,
.uk-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.uk-num-group').forEach(group => {
const minus = group.querySelector('.uk-num-minus');
const plus = group.querySelector('.uk-num-plus');
const input = group.querySelector('.uk-num-input');
if(minus && plus && input) {
minus.addEventListener('click', () => {
let val = parseInt(input.value) || 1;
if (val > (parseInt(input.min) || 1)) input.value = val - 1;
});
plus.addEventListener('click', () => {
let val = parseInt(input.value) || 1;
input.value = val + 1;
});
}
});
});
</script>
Rounded Pill Stepper
<div class="uk-num-group uk-num-pill">
<button class="uk-num-btn uk-num-minus">−</button>
<input type="number" class="uk-num-input" value="5" min="1">
<button class="uk-num-btn uk-num-plus">+</button>
</div>
<style>
.uk-num-group {
display: flex; border: 1px solid #cbd5e1; background: #fff;
}
.uk-num-pill { border-radius: 999px; padding: 4px; }
.uk-num-btn {
width: 32px; height: 32px; border: none; background: #f8fafc;
font-size: 1.1rem; color: #475569; cursor: pointer;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
}
.uk-num-btn:hover { background: #e2e8f0; }
.uk-num-input {
flex: 1; width: 100%; text-align: center; border: none;
outline: none; font-weight: 600; color: #0f172a;
font-size: 0.95rem; background: transparent;
-moz-appearance: textfield;
}
.uk-num-input::-webkit-inner-spin-button,
.uk-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
</style>
Vertical Stepper
<div class="uk-num-vertical">
<button class="uk-num-btn uk-num-plus">+</button>
<input type="number" class="uk-num-input" value="10" min="1">
<button class="uk-num-btn uk-num-minus">−</button>
</div>
<style>
.uk-num-vertical {
display: flex; flex-direction: column; border: 1px solid #cbd5e1;
border-radius: 0.5rem; overflow: hidden; background: #fff;
}
.uk-num-btn {
width: 100%; height: 32px; border: none; background: #f8fafc;
font-size: 1rem; color: #475569; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.uk-num-btn:hover { background: #e2e8f0; }
.uk-num-input {
width: 100%; text-align: center; border: none;
outline: none; font-weight: 600; color: #0f172a;
font-size: 0.95rem; padding: 0.5rem 0;
border-top: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1;
-moz-appearance: textfield; background: #fff;
}
.uk-num-input::-webkit-inner-spin-button,
.uk-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
</style>
Colored Stepper
<div class="uk-num-group uk-num-colored">
<button class="uk-num-btn uk-num-minus">−</button>
<input type="number" class="uk-num-input" value="2" min="1">
<button class="uk-num-btn uk-num-plus">+</button>
</div>
<style>
.uk-num-group {
display: flex; border: 1px solid #1e3a8a;
border-radius: 0.5rem; overflow: hidden; background: #fff;
}
.uk-num-colored .uk-num-btn {
background: #1e3a8a; color: #fff; border: none;
width: 40px; height: 40px; font-size: 1.25rem; cursor: pointer;
}
.uk-num-colored .uk-num-btn:hover { background: #0f2a5c; }
.uk-num-input {
flex: 1; width: 100%; text-align: center; border: none;
outline: none; font-weight: 600; color: #1e3a8a;
font-size: 0.95rem; background: #fff;
-moz-appearance: textfield;
}
.uk-num-input::-webkit-inner-spin-button,
.uk-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
</style>
Minimal / Ghost Stepper
<div class="uk-num-minimal">
<button class="uk-num-btn uk-num-minus">−</button>
<input type="number" class="uk-num-input" value="1" min="1">
<button class="uk-num-btn uk-num-plus">+</button>
</div>
<style>
.uk-num-minimal { display: flex; align-items: center; gap: 1rem; }
.uk-num-btn {
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid #cbd5e1; background: #fff;
font-size: 1.1rem; color: #475569; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.uk-num-btn:hover { border-color: #1e3a8a; color: #1e3a8a; }
.uk-num-input {
width: 40px; text-align: center; border: none; outline: none;
font-size: 1.1rem; font-weight: 600; color: #0f172a;
-moz-appearance: textfield;
}
.uk-num-input::-webkit-inner-spin-button,
.uk-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
</style>
Disabled State
<div class="uk-num-group uk-num-disabled">
<button class="uk-num-btn uk-num-minus" disabled>−</button>
<input type="number" class="uk-num-input" value="1" disabled>
<button class="uk-num-btn uk-num-plus" disabled>+</button>
</div>
<style>
.uk-num-group {
display: flex; border: 1px solid #e2e8f0;
border-radius: 0.5rem; overflow: hidden; background: #f8fafc;
opacity: 0.6; cursor: not-allowed;
}
.uk-num-btn {
width: 40px; height: 40px; border: none; background: #f1f5f9;
font-size: 1.25rem; color: #94a3b8; cursor: not-allowed;
}
.uk-num-input {
flex: 1; width: 100%; text-align: center; border: none;
outline: none; font-weight: 600; color: #94a3b8;
font-size: 0.95rem; border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0; background: #f8fafc;
-moz-appearance: textfield;
}
.uk-num-input::-webkit-inner-spin-button,
.uk-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
</style>