A Simple Input Form For Vue 3

Overview

vue-base-input (Vue 3)

Base-input:

I made it, for simplify a create form on my differents projects. Base-input return if your value is valid and value in Object.

Install

npm:

npm i vue-base-input

yarn:

yarn add vue-base-input
import vueBaseInput from 'vue-base-input';

export default {
  // ...
  components: {
    vueBaseInput
  },
  data() {
    return {
      modelValue: {
        value: '',
        isValid: ''
      };
  }
  // ...
}

CSS

Tailwind CSS

import 'vue-base-input/src/assets/vue-base-input-tailwind-css.css';

CSS

import 'vue-base-input/src/assets/vue-base-input.css';

Custom

/* transition */
.fade-enter-active,
.fade-leave-active {}
.fade-enter-from,
.fade-leave-to {}
/* end transition */

.base-input {}
.border-valid {}
.border-default {}
.border-faild {}
.error-color {}
.label-color {}
.bg-full {}
.bg-empty {}
.bloc-input {}
.input {}

/* input label inside true */
.input-label-inside {}
/* input label outside true */
.input-label-outside {}

.bloc-button {}
.button-icon {}
.button-icon img {}
.label-outside {}
.label-inside {}

@media (min-width: 768px) {
  .label-outside {}
  .label-inside {}
  .bloc-error .error-message {}
}

.required {}
.bloc-error {}
.bloc-error .error-message {}

/* animation label inside/outside*/
input:not(:-moz-placeholder-shown) ~ label.label-inside {}
input:not(:-ms-input-placeholder) ~ label.label-inside {}
input:focus-within ~ label.label-inside, input:not(:placeholder-shown) ~ label.label-inside {}
input:not(:-moz-placeholder-shown) ~ label.label-outside {}
input:not(:-ms-input-placeholder) ~ label.label-outside {}
input:focus-within ~ label.label-outside, input:not(:placeholder-shown) ~ label.label-outside {}

Usage 🚀

<vue-base-input></vue-base-input>

Using v-model

<vue-base-input
  v-model:value="modelValue.value"
  v-model:is-valid="modelValue.isValid"
>
</vue-base-input>

Available props

Prop Type Default Description
is-valid Boolean null return true if regex is true or if input is not empty
input-type String text Change input type: text, password, date
is-required Boolean false show * after label and change border color and icon
show-border Boolean true show/hide border if is-valid is true/false
show-icon Boolean true show/hide icon if is-valid is true/false
error-message String text show error message under input
icon String/Object null Add url icon 🔒
url-icon-valid String/Object null Add url icon success example: ✔️
url-icon-faild String/Object null Add url icon faild example:
url-icon-open-eyes String/Object null Add url icon open-eyes for password input type
url-icon-close-eyes String/Object null Add url icon close-eyes for password input type
regex String null build test and return is-valid true or false
label-inside Boolean false if input isn't empty the label place to inside or outside input
custom-style Object
input-class String

Demo

Demo on Netlify

You might also like...
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

Tiny (2k gzipped) and dependency free mask input for Vue.js
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

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

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

A pattern-placeholder for Vue that changes based on input text.
A pattern-placeholder for Vue that changes based on input text.

This plugin provides a placeholder component for Vue.js. It uses canvas to render patterns from input string like URL.

International Telephone Input with Vue.
International Telephone Input with Vue.

International Telephone Input with Vue

A versetile tag input component built with Vue 3 Composition API
A versetile tag input component built with Vue 3 Composition API

A versetile tag input component built with Vue 3 Composition API

Owner
Olivier MARION
Olivier MARION
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
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
Simple zero-dependency input mask for Vue.js and vanilla JS.

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

Alexander Shabunevich 451 Oct 6, 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
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

Cláudio Luiz Castro 84 Jul 26, 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 39 Sep 23, 2022
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

Benjamin Arambide 5 Nov 19, 2021
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

null 452 Sep 3, 2022
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

Text Mask 8.2k Sep 30, 2022
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

Kevin Ongko 420 Sep 24, 2022