Published on

Best Ways To Build A Floating Label (v2.2) With Tailwind CSS

Tags
Forms
Floating label (v2.2)

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes that can be used to style HTML elements. It allows developers to create responsive and customizable designs without writing custom CSS. Tailwind CSS is gaining popularity among developers because of its simplicity, flexibility, and ease of use.

The description of Floating label (v2.2) ui component

A floating label is a user interface component that is used to display a label inside a form field. The label "floats" above the input field when the user starts typing or enters any value. It provides a better user experience by reducing clutter and making the form field more visually appealing.

Why use Tailwind CSS to create a Floating label (v2.2) ui component?

Tailwind CSS provides a set of pre-defined classes that can be used to create a floating label. It makes the development process faster and easier. Tailwind CSS also provides responsive design classes that can be used to create a floating label that works on different screen sizes. Additionally, Tailwind CSS provides a wide range of customization options that can be used to create a unique and visually appealing floating label.

The preview of Floating label (v2.2) ui component

To create a floating label with Tailwind CSS, we can use the following classes:

<div class="relative">
  <input
    type="text"
    id="username"
    name="username"
    class="block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
    placeholder=" "
    required
  />
  <label for="username" class="absolute top-0 left-0 -mt-2 ml-3 px-1 text-xs bg-white text-gray-500">Username</label>
</div>

Free download of the Floating label (v2.2)'s source code

The source code of Floating label (v2.2) ui component

To create a floating label with Tailwind CSS, we can use the following HTML and CSS code:

<div class="relative">
  <input type="text" id="username" name="username" class="floating-label-input" required />
  <label for="username" class="floating-label">Username</label>
</div>

.floating-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 2rem) scale(1);
  transform-origin: left top;
  transition: all 0.2s ease-out;
  pointer-events: none;
  color: #a0aec0;
}

.floating-label-input:focus + .floating-label,
.floating-label-input:not(:placeholder-shown) + .floating-label {
  transform: translate(0, 0) scale(0.75);
  color: #4a5568;
}

.floating-label-input {
  width: 100%;
  padding: 1rem 0.5rem;
  font-size: 1rem;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  outline: none;
}

.floating-label-input:focus {
  border-bottom: 1px solid #4a5568;
}

<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 w-11/12 max-w-xl sm:mx-auto">
    <div class="relative p-8 bg-white shadow-sm sm:rounded-xl">
      <form class="w-full">
        <div class="mb-5 relative">
          <input type="email" id="email" class="peer pt-8 border border-gray-200 focus:outline-none rounded-md focus:border-gray-500 focus:shadow-sm w-full p-3 h-16 placeholder-transparent" placeholder="[email protected]" autocomplete="off" />
          <label for="email" class="peer-placeholder-shown:opacity-100   opacity-75 peer-focus:opacity-75 peer-placeholder-shown:scale-100 scale-75 peer-focus:scale-75 peer-placeholder-shown:translate-y-0 -translate-y-3 peer-focus:-translate-y-3 peer-placeholder-shown:translate-x-0 translate-x-1 peer-focus:translate-x-1 absolute top-0 left-0 px-3 py-5 h-full pointer-events-none transform origin-left transition-all duration-100 ease-in-out">Email address</label>
        </div>
        <div class="mb-5 relative">
          <input type="password" id="password" class="peer pt-8 border border-gray-200 focus:outline-none rounded-md focus:border-gray-500 focus:shadow-sm w-full p-3 h-16 placeholder-transparent" placeholder="password" autocomplete="off" />
          <label for="password" class="peer-placeholder-shown:opacity-100   opacity-75 peer-focus:opacity-75 peer-placeholder-shown:scale-100 scale-75 peer-focus:scale-75 peer-placeholder-shown:translate-y-0 -translate-y-3 peer-focus:-translate-y-3 peer-placeholder-shown:translate-x-0 translate-x-1 peer-focus:translate-x-1 absolute top-0 left-0 px-3 py-5 h-full pointer-events-none transform origin-left transition-all duration-100 ease-in-out">Password</label>
        </div>
        <button onclick="javascript:void(0);" class="w-full bg-indigo-600 text-white p-3 rounded-md">Submit</button>
      </form>
    </div>
  </div>
</div>

How to create a Floating label (v2.2) with Tailwind CSS?

To create a floating label with Tailwind CSS, we can follow the steps below:

  1. Create a container element with relative position.
  2. Add an input field with the floating-label-input class.
  3. Add a label element with the floating-label class and set the for attribute to the id of the input field.
  4. Apply the following CSS styles to the floating-label class:
    • Set the position property to absolute.
    • Set the top and left properties to 0.
    • Set the transform property to translate(0, 2rem) scale(1).
    • Set the transform-origin property to left top.
    • Set the transition property to all 0.2s ease-out.
    • Set the pointer-events property to none.
    • Set the color property to #a0aec0.
  5. Apply the following CSS styles to the floating-label-input class:
    • Set the width property to 100%.
    • Set the padding property to 1rem 0.5rem.
    • Set the font-size property to 1rem.
    • Set the border property to none.
    • Set the border-bottom property to 1px solid #e2e8f0.
    • Set the outline property to none.
  6. Apply the following CSS styles to the floating-label-input:focus class:
    • Set the border-bottom property to 1px solid #4a5568.
  7. Apply the following CSS styles to the floating-label-input:not(:placeholder-shown) + .floating-label class:
    • Set the transform property to translate(0, 0) scale(0.75).
    • Set the color property to #4a5568.
  8. Apply the following CSS styles to the floating-label-input:focus + .floating-label class:
    • Set the transform property to translate(0, 0) scale(0.75).
    • Set the color property to #4a5568.

Conclusion

In conclusion, Tailwind CSS provides a simple and efficient way to create a floating label user interface component. It offers a wide range of customization options and responsive design classes that can be used to create unique and visually appealing designs. By using Tailwind CSS, developers can save time and effort in creating a floating label component for their web applications.