NumberInput

Numeric stepper with minus and plus buttons and min/max clamping. Supports a size prop: xs, sm, md (default), lg, xl.

Import

Vue

import { UiNumberInput } from '@ziyarago/ui/vue'

Guests

Vue

<UiNumberInput label="Guests" v-model="value" :min="1" :max="9" />

Step of 10

Deposit, USDBetween 0 and 500

Vue

<UiNumberInput
  label="Deposit, USD"
  v-model="value"
  :step="10"
  :min="0"
  :max="500"
  hint="Between 0 and 500"
 />

Error

RoomsAt least one room is required

Vue

<UiNumberInput
  label="Rooms"
  v-model="value"
  :min="0"
  error="At least one room is required"
 />

Clearable (empty = null)

ChildrenClear the field to emit null; values clamp to 0..6 on blur

Vue

<UiNumberInput
  label="Children"
  v-model="value"
  placeholder="Optional"
  :min="0"
  :max="6"
  hint="Clear the field to emit null; values clamp to 0..6 on blur"
 />

Sizes

GuestsGuestsGuestsGuestsGuests

Vue

<UiNumberInput size="xs" label="Guests" v-model="value" :min="1" :max="9" />

<UiNumberInput size="sm" label="Guests" v-model="value" :min="1" :max="9" />

<UiNumberInput size="md" label="Guests" v-model="value" :min="1" :max="9" />

<UiNumberInput size="lg" label="Guests" v-model="value" :min="1" :max="9" />

<UiNumberInput size="xl" label="Guests" v-model="value" :min="1" :max="9" />

API reference

Numeric stepper with minus and plus buttons and a typed value. Use for quantities, guest counts and small integers.

Props

PropType and valuesDefaultDescription

modelValuev-modelnumber | null—Current number, or null/undefined when the field is empty.

placeholderstring—Shown while the field is empty.

minnumber—Lower bound. Default is unbounded.

maxnumber—Upper bound. Default is unbounded.

stepnumber1Amount added or subtracted by the buttons.

labelstring—Label shown above the control.

hintstring—Helper text under the control. Hidden while error is set.

errorstring—Error message under the control. Turns the control red and is announced with role="alert".

sizexssmmdlgxl'md'Control height, font and padding scale.

Events

Vue: @name. React: onName.

changeCalled with the new number, or null when the field is cleared. Typed values are emitted as-is and clamped to min and max on blur; the buttons clamp immediately. Text that is not a number is not emitted and reverts to the last valid value on blur.

Notes

The field can be fully cleared (null); the + and - buttons start from 0 when empty.
Decimal separators . and , are both accepted.