Tip #6: Use focus rings to improve user experience on input forms

Working with inputs in HTML and CSS is tough. What's even tougher: adding good user experience.

There's many stipulations and pragmatism over how you should style your inputs and whether or not you should show error states by changing border/text colors or if you should allow focus events to change up the styling.

In this tip, I want to add fuel to the fire by introducing you to a really cool effect called the focus ring.

Let's start off by defining a basic text input with some default styling with TailwindCSS:

<div class="p-6">
  <input type="text" class="block w-64 rounded-lg border border-gray-300 bg-gray-100 p-4" placeholder="Enter your name..." />
</div>

That'll spit out a really generic looking input form:

https://imgur.com/aFfCblZ

When we click on this input, we actually get some default styling applied via Tailwind (it's a focus effect that changes the border color):

https://imgur.com/n6H4gAR

Let's get rid of this and instead replace it with a focus ring:

<div class="p-6">
  <input type="text" class="block w-64 rounded-lg border border-gray-300 bg-gray-100 p-4 focus:ring-gray-400/30 focus:outline-none focus:ring-4" placeholder="Enter your name..." />
</div>

Here we added focus:outline-none (this removes that default styling) and in its place we added focus:ring-4 and focus:ring-gray-400/30. Here's what that looks like:

Now that's a much better effect for our input.

Bonus tips

Typically I like to use ring-4 because it looks just big enough to grab the user's attention without being overly big.

Typically I set the ring color to be 1 shade darker than whatever the background color is.

Typically I transition the ring into view, to do this you can add transition duration-300 ease-in-out to your input.