Nice-Numeric-Input

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

View Demo View Github

Getting Started

Installation

> npm install nice-numeric-input

Usage

Import

import NiceNumericInput from 'nice-numeric-input'

Register

export default Vue.extend({
    //...
    components: { NiceNumericInput }
    //...
});

For a full list of props see the Reference Props section.

<nice-numeric-input v-model="cashValue"
                    placeholder="Enter a cash value"
                    label="Cash"
                    name="example"
                    currency="GBP"
                    locale="en-GB"
                    :max="100"
                    :min="0" />

Reference

Props

Prop Type Required Default Value Notes
value Number Yes 0 Use v-model to get two-way binding
id String No "nice-numeric-input"
name String No "nice-numeric-input"
label String Yes Required for accessibility, use hide-label to remove the visual label
placeholder String No
step Number No 1 The amount to increase or decrease when using the step buttons
min Number No NEGATIVE_INFINITY Anything entered below this will fail the isValid check
max Number No POSITIVE_INFINITY Anything entered above this will fail the isValid check
isValid Boolean No Basic internal validation, use the .sync modifier to get changes
disabled Boolean No false Disable the entire component
locale String No window.navigator.language \|\| "en-US" Standard BCP 47 language tag
currency String No null When null currency formatting is turned off. Otherwise it can be any currency code e.g. USD, EUR, JPY
minDecimalPlaces Number No 0
maxDecimalPlaces Number No 2
integerOnly Boolean No false Prevents decimal numbers being entered, entries are rounded to the nearest integer
noControls Boolean No false Removes the step buttons
hideLabel Boolean No false Removes the visual label
decreaseTitle String No "Decrease" The button title for accessibility
increaseTitle String No "Increase" The button title for accessibility
increaseText String No "+" The text displayed on the increase step button
decreaseText String No "-" The text displayed on the decrease step button
superIncreaseText String No "++" The text displayed on the increase step button when super step is active (Ctrl or Alt)
superDecreaseText String No "--" The text displayed on the decrease step button when super step is active (Ctrl or Alt)
ultraIncreaseText String No "+++" The text displayed on the increase step button when ultra step is active (Ctrl + Alt)
ultraDecreaseText String No "---" The text displayed on the decrease step button when ultra step is active (Ctrl + Alt)
superStep Number No 10 The amount to change during a super step
ultraStep Number No 100 The amount to change during an ultra step
labelClass String No A custom class to apply to the visual label
inputClass String No A custom class to apply to the input field
decreaseButtonClass String No A custom class to apply to the decrease step button
increaseButtonClass String No A custom class to apply to the increase step button
wrapperClass String No A custom class to apply to the top level component element
superStepClass String No A custom class to apply to both step buttons when super step is active
ultraStepClass String No A custom class to apply to both step buttons when ultra step is active

Events

Event Emitted Type Notes
input Number Used automatically by a v-model binding. Can be bound manually, fires when the value is changed
update:isValid Boolean Used automatically by the .sync modifier on isValid prop. Can be bound manually, fires when the valid value changes.