Collection of 15 Vue Input Component for Your Vue.js App
Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.
1. Maska
- No dependencies
- Small size (~2 Kb gziped)
- Ability to define custom tokens
- Supports repeat symbols and dynamic masks
- Works on any input (custom or native)
2. v-range-flyout
A vue component that wraps a input type=number with a customizable range slider flyout with 2-way binding.
3. vue-tel-input
International Telephone Input with Vue.
4. Restricted Input
Allow restricted character sets in input elements.
Features
- Disallow arbitrary characters based on patterns
- Maintains caret position
- Format/Update on paste
- Works in IE11+
5. Vue Currency Input
The Vue Currency Input plugin allows an easy input of currency formatted numbers.
6. vue-fields
Input components for vue.js.
7. vue-material-input
Simple example of issue I am seeing with input labels.
8. vue-tribute
A Vue.js wrapper for Zurb’s Tribute library for native @mentions.
9. vue-number-smarty
Number input with rich functionality for Vue.js.
Features
- integer/float
- signed/unsigned
- step size
- increment/decrement value by scrolling when focused
- align variants
- min and max boundaries
- max length of integer part (only for float type)
- max length of float part (only for float type)
- max length of string
- error state
- readonly state
- theme options
10. Vue input mask
Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.
11. vue-r-mask
mask directive for vue.js
- Template similar to javascript regular expression. /\d{2}/
- Directive useful for your own input or textarea.
- Arbitrary number of digits in template /\d{1,10}/
12. Vue IP
An ip address input with port and material design support.
13. v-money Mask for Vue.js
Tiny input/directive mask for currency
Features
- Lightweight (<2KB gzipped)
- Dependency free
- Mobile support
- Component or Directive flavors
- Accept copy/paste
- Editable
14. Vue Masked Input
Dead simple masked input component for Vue.js 2.X. Based on inputmask-core.
15. VueJS input component
Mobile & Desktop friendly VueJS input component
Features used
CSS variables
Vue’s transition-group
Flexbox
I hope you like them!
#vue-js #vue-input #vue-input-component #input-vue
