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

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="absolutetransition-allleft-4top-1text-gray-600text-smpeer-placeholder-shown:text-gray-400peer-placeholder-shown:text-basepeer-placeholder-shown:top-4pointer-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-400peer-placeholder-shown:text-basepeer-placeholder-shown:top-4pointer-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="absolutetransition-allleft-4top-1text-gray-600text-smpeer-placeholder-shown:text-gray-400peer-placeholder-shown:text-basepeer-placeholder-shown:top-4pointer-events-none">Password</label><labelonClick={()=>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

--

--

--

Teaching JavasScript, React, React Native, MongoDB and NodeJS https://linktr.ee/ckmobile

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Yup, you should use React Hook Form

OBJECTS AND ITS INTERNAL REPRESENTATION IN JAVASCRIPT

A simple React Hook to prompt iOS users to install your wonderful PWA.

🎉ONE-YEAR ANNIVERSARY AIRDROP PROGRAM HAS ENDED🎉

React -Redux workflow understanding…

OOP Design Patterns 3— Decorator Pattern

Custom Scrolling Direction React Hook

Why You Should Be Using TypeScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ckmobile

Ckmobile

Teaching JavasScript, React, React Native, MongoDB and NodeJS https://linktr.ee/ckmobile

More from Medium

Build Instagram login page with Next.js and TailwindCSS Part 7— horizontal line

How to use Tailwind CSS with Next.js

How to use Bootstrap 5 with CDN in Nextjs?

How to use Bootstrap 5 with CDN in Nextjs By Rajdeep Singh

Build Instagram login page with Next.js and TailwindCSS Part 8— Add another section