Create the floating label and show hide password button with TailwindCSS and Next.js/React.js

Change the type of input field to show/hide the password

In this article, we are going to create the input with floating label, it can also show hide the password by pressing the button next to the password field.

The main idea is when the transparent placeholder shown, the label will move down and pretend it is a placeholder. When there is no placeholder, the label will move up on top of the input field.

Input field

For each input , we add a <div> to wrap the input field and the label, add the class relative, so we can adjust the position for the label later with class equal to absolute.

We have the border and with darker gray, the background is with lighter gray, padding of 4 units and rounded corner.

Add a class peer is for checking whether the placeholder shown later. The peer-placeholder-shown is finding the sibling selector with a class of peer before it, that’s why we need to place input element before the label element.

For the label, we position it by using left-4 and top-1 to place it on top of the input field when there is no placeholder show.

Set the darker gray color with text-gray-600 and small text with text-sm .

<div className="relative border border-gray-600 bg-gray-100 p-4 rounded">
<input type="text" placeholder="name"
className="peer placeholder-transparent  focus:outline-none bg-gray-100" />
<label 
className="absolute
transition-all
left-4
top-1
text-gray-600
text-sm
peer-placeholder-shown:text-gray-400
peer-placeholder-shown:text-base
peer-placeholder-shown:top-4
pointer-events-none
">name label</label>
</div>

When the placeholder show, it will drop down more with top-4 , set a lighter gray color text-gray-400 and the size return to root element’s font-size by using text-base . We also need to add pointer-events-none as this is not a real placeholder. When it drop down, it will block the input field and the user cannot type any text. By adding pointer-events-none , user will not click on the label and click on the input field directly.

peer-placeholder-shown:text-gray-400
peer-placeholder-shown:text-base
peer-placeholder-shown:top-4
pointer-events-none

Show hide password

First, we need to add the show/hide button next to the password input field.

We also create the state of showPassword, and the initial value is false.

const [showPassword, setShowPassword] = useState(false)

We bind the setShowPassword to the show/hide button

<div className="relative mt-6 border bg-gray-100 border-gray-600 p-4 rounded">
<input type={showPassword?'text':'password'} placeholder="password" className="peer placeholder-transparent bg-gray-100 focus:outline-none " />
<label htmlFor=""
className="absolute
transition-all
left-4
top-1
text-gray-600
text-sm
peer-placeholder-shown:text-gray-400
peer-placeholder-shown:text-base
peer-placeholder-shown:top-4
pointer-events-none
">Password</label>
<label
onClick={()=>setShowPassword(!showPassword)}
class="bg-gray-300 hover:bg-gray-400 rounded px-2 py-1 text-sm text-gray-600 font-mono cursor-pointer " for="toggle">{showPassword?'hide':'show'}</label>
</div>

Then, for the input field, we add type={showPassword?’text’:’password’} . If the showPassword is true, then use the type ‘text’, otherwise use the type ‘password’ to hide the password.

Also, at the label, we also change the text depend on the state of the showPassword, if true, then display the text ‘hide’, so next time when the user click on it, it will hide the password. Otherwise, show the ‘show’ text.

Follow us: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora, Pinterest

Join affiliates to earn money

https://ckmobile.gumroad.com/affiliates