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.

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