tailwind-float-label
Tailwind plugin to add floating label, control with float label components
Demo - https://unlight.github.io/tailwind-float-label
Setup
npm install --save-dev tailwind-float-labelAdd plugin to plugins section of tailwind.config.js
plugins: [require('tailwind-float-label')(options)],Options
type Options = {
/**
* Custom styles for container.
*/
container?: DeepPartial<{ [k: string]: string } | string>;
/**
* Custom styles for input control.
*/
control?: DeepPartial<{ [k: string]: string } | string>;
/**
* Custom styles for label.
*/
label?: DeepPartial<{ [k: string]: string } | string>;
};Usage
Plugins adds these components supposed used together:
-
.float-label-containerContainer which holds input control and label -
.float-label-controlForm control -
.float-label-selfLabel -
.float-label-stickyLabel which is always visible - But
.float-label-autoAutomatically makelabelfloating andinputinside this container
<form class="max-w-xs mx-auto p-5 space-y-4">
<h2 class="text-2xl font-bold text-center">Example</h2>
<div class="float-label-container">
<input
type="text"
id="name"
autocomplete="off"
placeholder="Name"
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
/>
<label for="name" class="float-label-self bg-white text-gray-500">Name</label>
</div>
<!-- Auto: make `label` floating for `input` -->
<div class="float-label-auto">
<input
type="text"
id="auto"
autocomplete="off"
placeholder="Auto"
class="outline-none focus:shadow-outline border w-full px-1"
/>
<label for="auto" class="bg-white text-gray-500">Auto</label>
</div>
</form>Notes:
.float-label-control and .float-label-self must be direct children of .float-label-container