Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Overview

Nice-Numeric-Input

npm npm bundle size NPM npm peer dependency version npm

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.

Demo

Basic Demo

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.
You might also like...
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Set of vue directives to add text restriction to your vue input

Vue-Input-Restriction-Directives Set of useful vue directives to add text restriction to your input No keyboard key validation, just regular expressio

Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

Input mask for React, Angular, Ember, Vue, & plain JavaScript
Input mask for React, Angular, Ember, Vue, & plain JavaScript

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include: https://github.com/uNmAnNeR/imaskjs

Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN scrip

A Vue.js component that wraps the awesome autoNumeric input formatter library
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

A custom input number component for Vue.js 2

vue-input-number A custom input number component for Vue.js 2. Install Yarn yarn add vue-input-number --dev NPM npm install vue-input-number --save-de

🛡 Vue directive to restrict an input by unicode values

v-unicode Vue directive to restrict an input by unicode values. It allows the input to be used just with the defined unicodes. It also sanitizes the v

Easy input of currency formatted numbers for Vue.js.
Easy input of currency formatted numbers for Vue.js.

Vue Currency Input The Vue Currency Input plugin allows an easy input of currency formatted numbers. It provides both a standalone component (currenc

Owner
Jack Steel
Jack Steel
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

WeblineIndia 1 May 25, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Ejiro Asiuwhu 41 Nov 4, 2022
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Mayank 12 Oct 12, 2022
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Vue.js Tips 1.6k Nov 25, 2022
A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade A lightweight and dependency free input masking library created specific for Vue Docs and Demo Installing npm i vue-input-facade yarn

Ronald Jerez 146 Nov 8, 2022
Simple zero-dependency input mask for Vue.js and vanilla JS.

Simple zero-dependency input mask for Vue.js and vanilla JS.

Alexander Shabunevich 484 Nov 18, 2022
A Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

null 0 May 9, 2022
Easy formatted numbers, currency and percentage with input/directive mask for Vue.js

vue-number-format Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of

CodersTM 44 Nov 19, 2022
A tags input component for Vue 3 with autocompletion, custom validation, templating and much more

vue-tags-input A tags input component for Vue 3 with autocompletion, custom validation, templating and much more Forked from @johmun/vue-tags-input, w

Sinclair Chen 18 Nov 14, 2022