DEV Community

Roman Sorin
Roman Sorin

Posted on • Updated on • Originally published at romansorin.com

Disabling the Tailwind input ring

If you’ve ever worked with Tailwind components or TailwindUI, you’ve probably come across the “focus ring”. On inputs (checkboxes, fields, etc.), this ring is shown when you’ve clicked or tabbed onto a component, indicating that you have selected it. Here’s an example:

Enabled ring on checkbox

Disabling the ring

I’ve seen myself and others try to disable this by simply calling the focus:ring-0 utility. This sort of works, but gives us this weird shadowing effect on the corners of our input:

Disabled ring, but persistent offset

By default, Tailwind will include this ring and an offset on certain input elements like checkboxes. If you’d rather not have this ring on all interactions, you can easily disable it:

<input type="checkbox" className="focus:ring-0 focus:ring-offset-0" />
Enter fullscreen mode Exit fullscreen mode

With this, we’re able to get a nice looking checkbox, without the “ugly” looking ring:

Fully disabled ring on a checked checkbox

Keeping things clean

To reduce redundancy across my project, I created a class that I can globally apply:

.without-ring {
  @apply focus:ring-0 focus:ring-offset-0;
}
Enter fullscreen mode Exit fullscreen mode

Now, instead of re-defining these utilities on all of my inputs, I can use the without-ring class to achieve the desired output:

<input type="checkbox" className="without-ring" />
Enter fullscreen mode Exit fullscreen mode

Keeping it accessible

Accessibility is important, but to keep it short, I won’t cover it here. Instead, this post by David Gilbertson provides a simple, framework-agnostic solution to showing the focus ring only when a user is tabbing and making it hidden otherwise.

Keeping it within Tailwind, we can use both our pre-defined without-ring class and native CSS selectors to show the ring for keyboard users, but hide it when using a mouse:

.without-ring:focus:not(:focus-visible) {
  @apply focus:ring-0 focus:ring-offset-0;
}

.without-ring:focus-visible {
  @apply ring-2 ring-offset-2;
}

// If we wanted to apply this globally, we could use native type selectors

[type="checkbox"]:focus:not(:focus-visible) {
  @apply focus:ring-0 focus:ring-offset-0;
}

[type="checkbox"]:focus-visible {
  @apply ring-2 ring-offset-2;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)