NumberInput

Numeric stepper with decrement and increment buttons flanking a centered input.

ExamplesCodeUsageChangelog

Basic usage

Tailwind v4

<NumberInput v-model="count" />

With min and max

The value is clamped within the provided range. The corresponding button is disabled when the boundary is reached.

Tailwind v4

<NumberInput v-model="count" :min="1" :max="10" />

Custom step

Tailwind v4

<NumberInput v-model="value" :min="0" :max="100" :step="5" />

Error state

Value must be at least 1

Tailwind v4

<NumberInput v-model="qty" :min="1" :error="errors.qty" />

Hint text

Max 99 items per order

Tailwind v4

<NumberInput v-model="qty" :min="1" :max="99" hint="Max 99 items per order" />

Disabled

Tailwind v4

<NumberInput v-model="count" :disabled="true" />

Props

Prop	Type	Default	Description
modelValue	number	—	Current value (use with v-model)
min	number	—	Minimum allowed value
max	number	—	Maximum allowed value
step	number	1	Amount to increment/decrement per click
disabled	boolean	false	Disables the stepper
error	string	—	Error message below the input
hint	string	—	Hint text below the input

Events

Event	Payload	Description
update:modelValue	number	Emitted on button click or direct input (clamped to range)