Simple floating labels as a Vue component without jQuery.

Check out the demo

Pull in the package:

yarn add vue-simple-floating-labels

Import the component:

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

Use in your template:

<FloatingLabel
    :config="{label: 'Example'}">
    <input name="example" type="text">
</FloatingLabel>

Input field should have a clear button.

The input height.

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

Turn scale animation on or off

Whether or not to apply the error class

Set the top and left property of the label.

Defaults:

{
    top: 10,
    left: 8
}

Custom classes.

Defaults:

{
    error: 'has-error'
}

Specify the focusColor, lineColor and blurredColor.

Defaults:

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

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

• Textarea
• Select

• Inspiration: Pen by Oscar Waczynski