DEV Community

loading...

How to Create a Material Design Floating Label in Tailwind [2021]

markmead profile image Mark Updated on ・2 min read

Originally posted on my website

Jump straight to the Tailwind Play example

If you are unaware of a Material Design floating label you can take a look at an example on the Material Design website; floating label on text input example.

For a label to be a floating label it needs to fulfill a set of criteria:

  • Be placed inside the input
  • Move away from the text when the input is focused
  • Move away from the text when the input has a value

Tailwind currently can only handle the first one out of the box, but I stumbled across this Stack Overflow answer when attempting to implement a floating label on a client website.

For the last one, I leaned on :placeholder-shown and created a Tailwind plugin that checks for :not(:placeholder-shown).

const notEmptySiblingPlugin = plugin(function ({ addVariant }) {
  addVariant('not-empty-sibling', ({ container }) => {
    container.walkRules((rule) => {
      rule.selector = `:not(:placeholder-shown) + .not-empty-sibling\\:${rule.selector.slice(1)}`
    })
  })
})
Enter fullscreen mode Exit fullscreen mode

This works perfectly but sadly :placeholder-shown isn't fully supported.

It also requires the use of the placeholder="" attribute on your input to either be empty or use the Tailwind class placeholder-transparent which is what I have opted for in my example.

If you're not a fan of this approach I'd recommend combining the first custom plugin focusedSibling and using JavaScript, here's how I have achieved this effect in the past with Alpine.

<div class="relative" x-data="{ value: '' }>
  <input type="text" id="name" x-model="value" />
  <label for="name" :class="{ '-translate-y-12': value, '-translate-y-1/2': !value }" class="focused-sibling:-translate-y-12 absolute top-1/2 left-2 transform transition-transform">Name</label>
</div>
Enter fullscreen mode Exit fullscreen mode

If you are working with Vue, this markup is easily transferable if you decide to not go the full Tailwind CSS route.

Discussion (0)

pic
Editor guide