# Focus-Visible Rings

**MUST** · **ID:** `interactions-focus-visible-tw` · **Category:** interactions
**Source:** [Tailwind](https://tailwindcss.com/docs)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-focus-visible-tw

> MUST: Use focus-visible: instead of focus: for focus rings (keyboard-only indicators)

Use focus-visible for keyboard-only focus indicators

The focus: variant shows focus rings on every focus, including mouse clicks. focus-visible: uses the browser's heuristic to only show focus rings when navigating with keyboard.

## Bad — do not do this

`interactions-focus-visible-tw-bad`

```tsx
export function FocusVisibleTwBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Focus Buttons (Not Visible)</h4>
        <p className="text-sm text-muted-foreground mb-4">
          Click with mouse - notice the ring appears even on click.
        </p>
        <div className="flex gap-3">
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2">
            Button 1
          </button>
          <button className="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2">
            Button 2
          </button>
        </div>
        <div className="mt-4 bg-muted rounded p-3 font-mono text-xs">
          <code className="text-error">focus:ring-2</code>
        </div>
      </div>
      <p className="text-xs text-error">
        Ring appears on every focus, including mouse clicks
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-focus-visible-tw-good`

```tsx
export function FocusVisibleTwGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Focus-Visible Buttons</h4>
        <p className="text-sm text-muted-foreground mb-4">
          Click with mouse, then tab through with keyboard to see the difference.
        </p>
        <div className="flex gap-3">
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
            Button 1
          </button>
          <button className="px-4 py-2 bg-secondary text-secondary-foreground rounded-lg outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
            Button 2
          </button>
        </div>
        <div className="mt-4 bg-muted rounded p-3 font-mono text-xs">
          <code>focus-visible:ring-2</code>
        </div>
      </div>
      <p className="text-xs text-success">
        Ring appears only for keyboard focus, not mouse clicks
      </p>
    </div>
  );
}
```

## References

- [Focus Visible](https://tailwindcss.com/docs/hover-focus-and-other-states#focus-visible)
- [:focus-visible MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible)