Add floating labels using a Vue component without jQuery

vue-simple-floating-labels

Add some simple floating labels for your inputs and forms using a component for Vue. All you have to do is install the component and create a config object for your labels and you are set, without the need for jQuery.

Check out the demo

Configuration

These are the available options for usage in the config object:

  • hasClearButton (default true)

Input field should have a clear button.

  • hasClearButton (default 64)

The input height.

  • Line (default true)

Input field should have a line below it (for accessibility reasons)

  • Scale (default true)

Turn scale animation on or off

  • HasError (default false)

Whether or not to apply the error class

  • labelOffset

Set the top and left property of the label.

Defaults:

{ top: 10, left: 8 }

Classes

Custom classes.

Defaults:

{ error: 'has-error' }

color

Specify the focusColor, lineColor and blurredColor.

Defaults: { focusColor: '#128CED', errorColor: '#ff0000', lineColor: '#128CED', blurredColor: 'rgba(3, 23, 40, 0.34)' }

Events

  • clear: When the user presses the clear button (when using v-model you should clear the value)
  • focus: On focus
  • blur: On blur
  • input: On input

Example

To start working with the Vue simple floating labels use the following command to install it.

Via yarn:

yarn add vue-simple-floating-labels

Import it where you need it and don't forget to add it to your components object.

import FloatingLabel from 'vue-simple-floating-labels'
export default {
    components: {
            FloatingLabel
    }
}

Usage:

Use the component anywhere you would like in the template:

<FloatingLabel
    @clear="alertClear"
    :config="{ label: 'password', color: { focusColor:'#5eff07', lineColor: '#ff00ff', blurredColor: '#ff00ff', errorColor: '#ff9900' }, classes: {error: 'has-error'} , hasError: hasError }">
    <input name="password" type="password">
</FloatingLabel>
<small v-if="hasError">This field contains an error.</small>

The above markup is an example of a floating label on a password input, with different colors for focus and blur, and different classes for errors.

data () {
    hasError: false
},
methods: {
    alertClear () {
        this.hasError = !this.hasError
    },

Making use of the clear event made available by the component to display an error message.

That's it! If you would like to get started with Vue simple floating labels, head to the project's repository on GitHub, where you will also find the source code. Created & submited by @SabatinoMasala