Numeric input

Takes a number, with steppers for small adjustments such as thresholds.

Refined portWildNumericInput.vueForms/Numeric Input

Try it

Press the steppers, or tab to one and press Enter.

240

Steppers

Error

Disabled

<WildTextInput
  v-model="threshold"
  size="lg"
  type="quantity"
/>

Use it for a whole number people adjust in small steps, such as an alarm threshold.

Don’t use it

For text, or a number nobody nudges, such as a phone number. Use Text input or Phone input.

A 44px field with a decrease and an increase stepper inside the frame.

240

lg · 44

<WildTextInput v-model="threshold" type="quantity" size="lg" />

It’s always 44px tall, because the 34px steppers don’t fit the 36px frame.

The same five states as the text input.

rest

240

hover

240

focus

240

error

240

disabled

240

The steppers are buttons named Decrease and Increase. When the field is disabled, so are they.

Key	What it does
Tab	Moves to the decrease stepper, then the increase stepper.
Enter / Space	Steps the number down or up.

Prop	Type	Default	Description
modelValue	number	—	The number.
type	'quantity'	—	Adds the steppers.
size	'lg'	'lg'	Always 44px; the steppers need it.
error	boolean \| string	false	Red border; a string also shows the message.
disabled	boolean	false	Greys the field and disables the steppers.