DEV Community

notiz.dev profile image Marc Stammerjohann
Marc Stammerjohann for notiz.dev

Posted on • Originally published at notiz.dev on

Floating Form Field with Tailwind CSS

#tailwindcss #css #webdev

In the following lesson you will learn how to use Tailwind CSS utility-first approach to create a floating form field known from Material Design. This is inspired by the awesome video from fireship.io.

Floating Form

You can follow along in a new project or get the source code from GitHub.

Setup

Let's start in an empty directory and setup up a default package.json file using npm init -y.

Setup Tailwind CSS

Setup Tailwind by installing

npm i -D tailwindcss postcss-cli autoprefixer
Enter fullscreen mode Exit fullscreen mode

Generate a Tailwind config file as you will customize Tailwind for the floating form field later.

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Create postcss.config.js file requiring tailwindcss and autoprefixer as a plugin:

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer")
  ]
};
Enter fullscreen mode Exit fullscreen mode

Create your tailwind styles under css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Add those scripts to your package.json one to build and the other to watch changes made to the tailwind.css file.

"scripts": {
  "build": "postcss css/tailwind.css -o public/build/tailwind.css",
  "dev": "postcss css/tailwind.css -o public/build/tailwind.css -w"
},
Enter fullscreen mode Exit fullscreen mode

Setup HTML

Start with the following simple HTML layout - create an index.html in the public directory.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FFFwT</title>

    <link rel="stylesheet" href="build/tailwind.css" />
  </head>
  <body class="antialiased p-10">
    <form>
      <div>
        <input type="text" name="username" placeholder=" " />
        <label for="username">Username</label>
      </div>
    </form>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

You can use live-server to start a dev-server with live reload.

live-server public
Enter fullscreen mode Exit fullscreen mode

Here you have your starting point - an input and a label.

Input and Label

Let's add styles to create a floating form field.

Floating Form Field

Focus Border

Start by adding a bottom border to the div using border-b-{width}

<div class="border-b-2">
  <input type="text" name="username" placeholder=" " />
  <label for="username">Username</label>
</div>
Enter fullscreen mode Exit fullscreen mode

Border bottom

To change the border color when the input is focused use the pseudo-class focus-within. Enable the focus-within variant in Tailwind for borderColor by adding it in the tailwind.config.js under the variants section:

variants: {
  borderColor: ['responsive', 'hover', 'focus', 'focus-within'],
},
Enter fullscreen mode Exit fullscreen mode

Now add focus-within:border-blue-500 to change the border color on focus

<div class="my-4 border-b-2 focus-within:border-blue-500">
  <input type="text" name="username" placeholder=" " />
  <label for="username">Username</label>
</div>
Enter fullscreen mode Exit fullscreen mode

Change border color on focus

Floating Label

Begin with changing the position of the div to relative so that you can use top to control the position of the label. Add class="absolute top-0" to the label.

input is an inline element, add the Tailwind block class to change it to a block element. Also set the input width to 100% with w-full to tap the input on the whole form field. Additionally, add appearance-none and focus:outline-none to the input to remove browser specific styles.

<div class="relative my-4 border-b-2 focus-within:border-blue-500">
  <input type="text" name="username" placeholder=" " class="block w-full appearance-none focus:outline-none" />
  <label for="username" class="absolute top-0">Username</label>
</div>
Enter fullscreen mode Exit fullscreen mode

Currently the label is covering the input field and preventing you from focusing the input πŸ™ˆ.

Label is covering up the input

Let's change the z-index of the label to be behind the input field by setting it to z-index: -1. Extend the Tailwind theme to generate a negative z-index for you:

theme: {
  extend: {
    zIndex: {
      "-1": "-1",
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

Add -z-1 class to the label, now the label is not visible anymore. Add bg-transparent to the input.

<div class="relative my-4 border-b-2 focus-within:border-blue-500">
  <input type="text" name="username" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
  <label for="username" class="absolute top-0 -z-1">Username</label>
</div>
Enter fullscreen mode Exit fullscreen mode

The label is visible again and the input field can be focused by taping on the label too 🐡.

Next make the label float above the input, again, using the pseudo-class focus-within. Open your tailwind.css and add the following CSS selector:

input:focus-within ~ label {

}
Enter fullscreen mode Exit fullscreen mode

Now use Tailwind's @apply to transform, scale and change the label text color on input focus.

input:focus-within ~ label {
 @apply transform scale-75 -translate-y-6 text-blue-500;
}
Enter fullscreen mode Exit fullscreen mode

Also add duration-300 to your label class to control the labels transition duration.

Floating label on focus

Awesome the label is floating 🎈, however, it stops floating when you remove the focus from the input 😞. The label should float if the input field has some content. Target the placeholder, if its not shown input:not(:placeholder-shown) ~ label thus the input has content and the label should float.

input:focus-within ~ label,
input:not(:placeholder-shown) ~ label {
  @apply transform scale-75 -translate-y-6;
}

input:focus-within ~ label {
  @apply text-blue-500;
}
Enter fullscreen mode Exit fullscreen mode

Floating label without focus

Yeah 🀩, the label floats on focus and if the input has content. It seems the label is not aligned with the input field. Set transform-origin on the label to 0%. Let Tailwind generate it for you, open tailwind.config.js and add it to the theme section:

theme: {
  extend: {
    transformOrigin: {
      "0": "0%",
    },
    zIndex: {
      "-1": "-1",
    },
  },
}
Enter fullscreen mode Exit fullscreen mode

Now add origin-0 to the label and finally you have your own floating form field made with Tailwind CSS πŸ˜πŸš€

Floating Form Field

Building a form

Let's build a form field by duplicating the floating form field or by extracting the styles with @apply.

Add space-y-{size} to the form to add margin between your input fields. You could also wrap it with a card.

 <form class="max-w-sm mx-auto rounded-lg shadow-xl overflow-hidden p-6 space-y-10">
  <h2 class="text-2xl font-bold text-center">Login</h2>
  <div class="relative border-b-2 focus-within:border-blue-500">
    <input type="text" name="username" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
    <label for="username" class="absolute top-0 -z-1 duration-300 origin-0">Username</label>
  </div>
  <div class="relative border-b-2 focus-within:border-blue-500">
    <input type="text" name="email" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
    <label for="email" class="absolute top-0 -z-1 duration-300 origin-0">Email</label>
  </div>
  <div class="relative border-b-2 focus-within:border-blue-500">
    <input type="password" name="password" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
    <label for="password" class="absolute top-0 -z-1 duration-300 origin-0">Password</label>
  </div>
</form>
Enter fullscreen mode Exit fullscreen mode

Here you have your first form using the floating form field

Floating form

Next, try out another style - Outline Form Field.

Outline Form Field

In this style the form field has an outline all around and the label floats into the outline. Reuse the floating form field and change border-b-2 to border-2 this gives you the outline.

Add padding p-4 to create space inside the outline and increase the font size text-lg of the input and the label.

<div class="relative border-2 focus-within:border-blue-500">
  <input type="text" name="username" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
  <label for="username" class="absolute top-0 p-4 text-lg -z-1 duration-300 origin-0">Username</label>
</div>
Enter fullscreen mode Exit fullscreen mode

Look at our outline form field

Outline form field

Focus the input and you notice the label is not covering up the outline.

Floating label not covering the outline

To make the label cover up the outline customize the floating CSS applied to the outline form field. Duplicate the custom CSS in your tailwind.css and add .outline class to both selectors. Add outline class to the div around your input and label.

.outline input:focus-within ~ label,
.outline input:not(:placeholder-shown) ~ label {
  @apply transform scale-75 -translate-y-6;
}
Enter fullscreen mode Exit fullscreen mode

Update a few styles on the label to remove the top and bottom padding - py-0. Also reduce the left and right padding to px-1, add margin left ml-3 to align it with the input. Reset the z-index to z-0 that the label is above the outline. Finally, reduce the translate y value until the label is perfectly matching the outline.

.outline input:focus-within ~ label,
.outline input:not(:placeholder-shown) ~ label {
  @apply transform scale-75 -translate-y-4 z-0 ml-3 px-1 py-0;
}
Enter fullscreen mode Exit fullscreen mode

Perfect the label is exactly on the outline, but the line is still visible.

Floating label covers outline with line through

To hide the outline set the background of the label to the same background of the container where you place the form field. Add bg-white to the label, this should do the trick.

<div class="outline relative border-2 focus-within:border-blue-500">
  <input type="text" name="username" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
  <label for="username" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Username</label>
</div>
Enter fullscreen mode Exit fullscreen mode

Now you have the outline form field working too. πŸ‘

Building a form

Now create a form using the outline style.

<form class="max-w-sm mx-auto rounded-lg shadow-xl overflow-hidden p-6 space-y-10">
  <h2 class="text-2xl font-bold text-center">Login</h2>
  <div class="outline relative border-2 focus-within:border-blue-500">
    <input type="text" name="username" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
    <label for="username" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Username</label>
  </div>
  <div class="outline relative border-2 focus-within:border-blue-500">
    <input type="email" name="email" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
    <label for="email" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Email</label>
  </div>
  <div class="outline relative border-2 focus-within:border-blue-500">
    <input type="password" name="password" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
    <label for="password" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Password</label>
  </div>
</form>
Enter fullscreen mode Exit fullscreen mode

Outline Form

If you followed along, create and customize your own floating form field w/ Tailwind CSS. Send me your own design on Twitter @mrcjln.

Top comments (8)

Collapse
 
garygrossgarten profile image
Gary Großgarten •

Cool, wanna see more tailwind components πŸ‘€

Collapse
 
fayaz profile image
Fayaz Ahmed •

Tailwind is just awesome. I wrote something - dev.to/fayazara/making-a-navigatio...

Collapse
 
garygrossgarten profile image
Gary Großgarten •

Thanks for sharing!

Collapse
 
marcjulian profile image
Marc Stammerjohann •

Awesome, thanks for sharing.

Collapse
 
jonaslinn profile image
Jonas Linn •

Hi Marc,

you have a slight error in your markup. The input elements are missing its id. Currently the for attribute on the labels has no corresponding id in the markup.

My preferred markup(not tested) would look like this. You don't need an id or for if you wrap the <input> in the <label>. The label might need display: block;.

<label class="outline relative border-2 focus-within:border-blue-500">
    <input name="username" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent">
    <span class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Username</span>
</label>
Collapse
 
marcjulian profile image
Marc Stammerjohann •

Hi Jonas, thanks for catching that the id from the input is missing. Looks like a nice workaround, I will try it out!

Collapse
 
gerka profile image
German Bidzilja •

Cool! A very clear tutorial! Nice results as well.

Collapse
 
marcjulian profile image
Marc Stammerjohann •

Thanks! and its easily customisable with tailwind

Read next

skylerdev profile image

How I Created a Hover Reveal Text Animation with TailwindCSS and React

Skyler Dev -

jpbp profile image

Javascript Essentials 101: Higher-Order Functions, Currying, and Partial Application

JoΓ£o Pedro -

mshsayket profile image

How to Calculate the Average of a Column Using Eloquent

Saddam Hossain -

safdarali profile image

5 things I wish I knew as a Web Developer

Safdar Ali -