Cart
QuantitySelector
Increment/decrement quantity input with min/max constraints.
QuantitySelector
A numeric stepper control with increment and decrement buttons. Supports min/max limits, disabled state, and size variants.
Preview
Value: 1
Usage
<script setup>
const qty = ref(1)
</script>
<CQuantitySelector v-model="qty" />
With Min/Max
<CQuantitySelector v-model="qty" :min="1" :max="10" />
Disabled
<CQuantitySelector v-model="qty" disabled />
Sizes
<CQuantitySelector v-model="qty" size="sm" />
<CQuantitySelector v-model="qty" size="lg" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | number | required | Current quantity |
min | number | 1 | Minimum value |
max | number | null | null | Maximum value (null = unlimited) |
disabled | boolean | false | Disable the control |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | number | Quantity changed |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
decrement | { decrement, disabled } | Custom decrement button |
value | { value } | Custom value display |
increment | { increment, disabled } | Custom increment button |