Create that Component #4
This is a series where I design and code various common UI components with React and styled-components.
It has been quite some time since I made one of these episodes — sorry about that.
This time we are going to make a login form with those fancy inputs that have floating labels. Also, as an extra we are going to add a twist to the form, literally, at the end of this article.
But.
First things first
I don’t know about you but I personally haven’t started a single project without first spending some (read: “a lot”) of time picking appropriate fonts and colors to be used.
So, that’s what we are going to do first.
For me the best place to find pretty fonts is the good’n old Google Fonts. After trying hard to resist using Raleway I found Nunito that looked sleek enough:
For the colors I decided to try Coolors.
After spamming the space bar for a few minutes to generate random palettes I landed on this interesting combination:
Okay, the hard part is done, and now we are ready to start coding!
Floating labels
Let’s start by defining what a floating label actually is and why we should use one:
A “floating” label is an animated non-intrusive way to present a piece of text next to an input to describe it’s purpose. When the input is not focused the label sits on top of the input field and when the input gets focused it moves on top of the input out of the way to allow the user to see what he is typing. Floating labels are excellent at preserving the context of the input with a great UX (smooth animation) compared to more commonplace placeholder or stacked labels.
Disclaimer: that’s not the official definition of a floating label — I made all that up. But it’s accurate enough.
Now that we know the what and why it’s time to see some code. First, let’s see how the input component works — we’re calling it TextField.
We define focus and blur handlers for the input to update the state, but since the label is on top of the input when it’s not focused, as defined earlier, we also need to handle the case where the user clicks on the label instead of the input when trying to focus it. This is easy to do by updating the state for the focus and manually focusing the input in the onClick handler of the label. You might have noticed the weird innerRef we are giving to the input element instead of just ref. This is because of styled-components, the CSS-in-JS styling library we are using.
That’s it for the logic part! You can see the full component with styles and all below.
It might seem that there’s a lot happening here related to the styles but most of it is just theming stuff. The interesting thing here is how we move the label to the center of the input and then up (plus scale it down a bit) with a simple transform calculations based on the vertical padding of the input and the font size of the label. Another cool thing here is the color manipulation for the focus state of the input. We are using polished from the same people that have made styled-components to darken the border when the input is focused.
So once again, here’s how things are looking so far:
Pretty neat, huh? That’s all for the floating label stuff but we are not done yet.
Twerk twerk twerk
Do you remember how I promised that there will be a twist at the end?
Here it is:
A twisting form component — or as I like to call it: TwerkForm!
Tadaa! 🎉
Totally worth the read, right?
I wanted to add something extra and show you one cool way to validate your login forms. The way you usually indicate a failed login attempt is to use red error messages / borders to tell that something went wrong. But that is a bit boring don’t you think? What if we used a similar gesture for negative feedback that we humans so often use? A simple shake (or twerk) animation indicates the same thing just as well as red text / borders, and it’s much more human-like making the form component more interesting. Of course in a more complex form this would not work since you would have to provide more detailed feedback about what went wrong, but for a login form it’s perfect since you don’t really want to give too much feedback about what went wrong in order to not leak anything sensitive.
Check the code below for the form component with the twerk animation, plus see how we use the earlier TextField component in action. Once again there’s quite a bit happening related to theming so don’t pay too much attention to that.
That’s it! We have twerked ourselves to the end of this article. I hope you found this useful or at least slightly enjoyable.
See you next time!
PS: As you can see from all example texts I’ve been watching a lot of Rick and Morty lately. It’s an amazingly dark and funny show that you should definitely watch!
We are hiring!
Do you want to build exciting and interesting apps with modern web technologies? Check out our open positions and join us at Taito United!
Can’t find positions directly suitable for you? Feeling adventurous? Send your resume and an open application to jobs@taitounited.fi — we are more than happy to hear you out and see what you got cooking 🍳
