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-label

Add 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-container Container which holds input control and label
.float-label-control Form control
.float-label-self Label
.float-label-sticky Label which is always visible
But .float-label-auto Automatically make label floating and input inside 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

Similar Projects

https://github.com/notiz-dev/floating-form-field-tailwindcss