v-floating-label

This directive uses either the placeholder attribute or the label property of directive binding. The binding value will also observe an invalid property of the binding and a required attribute. It can only be attached to input element types which allow a placeholder (i.e. type is text, search, email, password ,url or tel) attribute or textareas or a component wrapping such an element. In this case no label element must be a child element of this component.

Examples

Input element using the placeholder attribute.

    <input v-floating-label placeholder="Type something..." />

Result

Input element using the label property of the directive binding and rendering the label as required.

    <input v-floating-label="{ label: 'Your name, please' }" required />

Result

Styling of the label of a required element is left to you. In this specific case a

@layer utilities {
    .required {
        @apply font-bold after:content-['*'];
    }
}

was used.

Textarea using the placeholder attribute.

    <textarea v-floating-label placeholder="Leave a comment" />

Result