Number Input

Form

A numeric input with integrated increment and decrement buttons, min/max support.

Props

Prop	Type	Default	Description
`modelValue`	`number`	`0`	Current numeric value (v-model).
`min`	`number`	—	Minimum allowed value.
`max`	`number`	—	Maximum allowed value.
`step`	`number`	`1`	Increment/decrement step.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Input height.
`disabled`	`boolean`	`false`	Disable all controls.
`error`	`boolean`	`false`	Error border state.

Sizes

vue

<script setup lang="ts">
const qty = ref(1)
</script>
<template>
  <DsNumberInput v-model="qty" :min="0" :max="99" />
</template>

Disabled

Use DsNumberInputSkeleton as a loading placeholder while content is being fetched.

Small

vue

<DsNumberInputSkeleton size="sm" />

Medium

vue

<DsNumberInputSkeleton size="md" />

Large

vue

<DsNumberInputSkeleton size="lg" />

MultiSelect

OTP Input