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:
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:
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" />
With this, we’re able to get a nice looking checkbox, without the “ugly” looking ring:
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;
}
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" />
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;
}
Top comments (0)