counter — quantity input with +/- buttons
Numeric input with increment/decrement buttons, min/max/step bounds, an optional unit label. Emits a counter:change custom event on every value change so other code (cart, calculator, filter) can react.
Most common use: product quantity in a cart. Also fits range filters ("od ... do ..."), age inputs, dosage calculators.
Install
npx czg-ui add counter@import 'components/counter'; to app.scss, import './components/counter'; to app.js.
Requires base.
Parameters
| Param | Type | Default | Notes | |
|---|---|---|---|---|
name | string | 'qty' | name attribute on <input> | |
value | int | 1 | Initial value | |
min | int | 1 | Lower bound | |
max | int\ | null | — | Upper bound (no limit if null) |
step | int | 1 | Increment per click | |
unit | string\ | null | — | Suffix label (e.g. 'ks', 'kg') |
id | string\ | null | — | id attribute on <input> |
disabled | bool | false | Disable both buttons + input | |
class | string\ | null | — | Extra wrapper class |
Usage
{include /app/components/Form/counter.latte,
value => 1, min => 1, max => 99, unit => 'ks'}
{include /app/components/Form/counter.latte,
value => 0, min => 0, step => 5, unit => 'kg'}JS event
document.addEventListener('counter:change', (e) => {
console.log(e.detail.value, e.detail.previousValue);
// e.target = the .counter root element
});The component clamps to min / max automatically and disables the - button at min, + button at max.
When NOT to use
- Free-form numeric input (price, weight in grams) — plain `<input
type="number">` with min/max validation
- Boolean toggle — use a checkbox or a switch