Counter
Tailwind CSS and Alpine JS Counter
Counters are a great way to display numbers in a visually appealing format. They allow you to select a specific number using buttons.
Requires Alpine JS
This component requires Alpine JS v3 to function properly. Some advanced features may require additional Alpine plugins (such as focus).
Tell Me MoreDefault counter
A counter with two buttons to increase or decrease the number and an input field to display the number.
HTML
<div x-data="{ currentVal: 1, minVal: 0, maxVal: 10, decimalPoints: 0, incrementAmount: 1 }" class="">
<label for="counterInput" class="">Items(s)</label>
<div @dblclick.prevent class="">
<button @click="currentVal = Math.max(minVal, currentVal - incrementAmount)" class="" aria-label="subtract">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
</svg>
</button>
<input x-model="currentVal.toFixed(decimalPoints)" id="counterInput" type="text" class="" readonly />
<button @click="currentVal = Math.min(maxVal, currentVal + incrementAmount)" class="" aria-label="add">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
</button>
</div>
</div>
Split counter
A counter with two buttons to increase or decrease the number and an input field to display the number.
HTML
<div x-data="{ currentVal: 1, minVal: 0, maxVal: 10, decimalPoints: 0, incrementAmount: 1 }" class="">
<label for="counterInput" class="">Items(s)</label>
<div @dblclick.prevent class="">
<button @click="currentVal = Math.max(minVal, currentVal - incrementAmount)" class="" aria-label="subtract">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
</svg>
</button>
<input x-model="currentVal.toFixed(decimalPoints)" id="counterInput" type="text" class="" readonly />
<button @click="currentVal = Math.min(maxVal, currentVal + incrementAmount)" class="" aria-label="add">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
</button>
</div>
</div>
Data
List of all Alpine JS data used in this component.
| Property | Description |
|---|---|
| currentVal |
Number - Current value of the input |
| minVal |
Number - Minimum acceptable value for the input |
| maxVal |
Number - Maximum acceptable value for the input |
| decimalPoints |
Number - Number of decimal points |
| incrementAmount |
Number - Number of steps with each increment |
Keyboard Navigation
| Key | Action |
|---|---|
| Tab |
Next focusable element gets the focus |
| Space | Focused item gets selected |