Tailwind plugin to add floating label, control with float label components
npm install tailwind-float-labelTailwind plugin to add floating label, control with float label components
Demo - https://unlight.github.io/tailwind-float-label
1. npm install --save-dev tailwind-float-label
2. Add @import 'tailwind-float-label' to your main css file
3. Plugin provides classes which must be set for label and input to make label floats.
- .float-container Container which holds input control and label
- .float-input Form input control
- .float-always Use with .float-container to makem label always visible (sticky)
``html`
If you need animation, add to .float-label following classes: transition-all duration-200`
- https://github.com/notiz-dev/floating-form-field-tailwindcss
- https://tailwindow.github.io/component-tailwindcss/components/form/input-text/index.html
- https://github.com/you-dont-need/You-Dont-Need-JavaScript#Floating
- https://csslayout.io/floating-label/
- https://tailwindcomponents.com/component/login-form-with-float-label-input
MIT License (c) 2025
- find information about plugins how to do it
- how to set variables
- update readme (no sticky, just remove input placeholder)
- block with multiple type of input (select, text area)
- block with size of inputs (lg, xs, sm)