Number Stepper

Display a number stepper element.

Usage

<script lang="ts" setup>
const value = ref(10)
</script>

<template>
  <CNumberStepper
    v-model="value"
    name="example"
    label="Example"
    :max="20"
    :step="2"
  />
</template>

Disabled

<template>
<CNumberStepper disabled :model-value="10" label="Example" :max="20" :step="2" />
</template>

Required

<template>
<CNumberStepper required :model-value="10" label="Example" :max="20" :step="2" />
</template>

Errors

  • Example error
<template>
<CNumberStepper required :model-value="10" label="Example" :max="20" :step="2" :errors="['Example error']" />
</template>

Middleware

The component provides two props, incrementMiddleware and decrementMiddleware that accept a function to execute on a new value before it's updated.

<script lang="ts" setup>
const value = ref(10)
const incrementMiddleware = (val: number) => val + 4
const decrementMiddleware = (val: number) => val - 4
</script>

<template>
  <CNumberStepper
    v-model="value"
    name="example"
    label="Example"
    :increment-middleware="incrementMiddleware"
    :decrement-middleware="decrementMiddleware"
    :max="50"
    :step="2"
  />
</template>

Props

modelValuerequired
number
step
number
1
min
number
0
max
number
100
name
string
label
string
id
string
errors
string[]
incrementMiddleware
(val: number) => number
decrementMiddleware
(val: number) => number
required
boolean
disabled
boolean