Floating Label Input

A Vue component that creates an input field with a floating label and animated underline.

Usage

Label

Props

PropTypeDefaultDescription
label
String
"Label"Text to be displayed as the floating label.
type
String
"text"Type of the input field (e.g., text, password, email).
underlineColor
String
"aliceblue"Color of the animated underline when the input is focused.

Events

EventDescription
handleInputEmitted when the input value changes.

Customization

You can customize the FloatingLabel component:

  • Modify the label prop to change the text of the floating label.
  • Use the type prop to set the appropriate input type (e.g., text, password, email).
  • Adjust the underlineColor prop to change the color of the animated underline.
  • Modify the SCSS styles to adjust the animations, sizes, and other visual aspects.
3D Card Effect
A set of components for creating interactive 3D card effects with hover animations.
Accordion
A versatile UI component for creating collapsible content sections.