Vue 3 Float Label

Float Label like package for Vue 3. Written in Composition API and easily customizable with CSS.

!Animation intro showing Vue 3 Float Label in action

``html



`

Installation

Install the package via npm:
`sh
$ npm install vue3-float-label
`

Usage

To use the component locally within a single component:

`html



`


$3

#### label

String - If you want a different label than the placeholder text. You can also pass it dynamic text based on another value (i.e. 'Start time on ' + beginningDate )

Example:
`html



`


#### float

Boolean - Use this to manually control when the label is floated. This disables all other detection and on-focus prop.

`html



`


#### on-focus

Boolean - Optional behavior that triggers the float when the field is in focus instead of when content is typed

Customizing Styles

The vue3-float-label component uses CSS variables to allow easy customization of its appearance. You can either copy the styles and modify them yourself, or there are some variables you can override. Below are the default CSS variables defined in the component that you can override in your stylesheet:

`css
:root {
--vfl-padding-y: 17px;
--vfl-padding-x: 16px;
--vfl-label-color: #6c6c6c;
--border-color: lightgray;
--border-width: 1px;
}
``

License

This project is licensed under the MIT License.