Number Stepper

Display a number stepper element.

Usage

Example

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

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

Disabled

disabled

Example

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

Required

Example*

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

Errors

Example*

Example error

      <template>
  <CNumberStepper required v-model="value" 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.

Example

      <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

Prop	Default	Type
`modelValue`		`number`
`max`	`100`	`number`
`id`		`string`
`name`		`string`
`min`	`0`	`number`
`step`	`1`	`number`
`label`		`string`
`required`		`boolean`
`disabled`		`boolean`
`errors`		`string[]`
`incrementMiddleware`		`(val: number): number`
`decrementMiddleware`		`(val: number): number`
`variant`	`'subtle'`	`"outlined" \| "subtle"`