# Missing Focus Outline

**MUST** · **ID:** `interactions-rams-focus-outline` · **Category:** interactions
**Source:** [RAMS](https://www.rams.ai/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-rams-focus-outline

> MUST: Interactive elements must have visible focus indicator. Never use outline-hidden without providing focus-visible replacement. Keyboard users must see where focus is.

Interactive elements must have visible focus indicators

Rams ships this as a Serious checklist row, not prose. Our reading: focus indicators show keyboard users where they are on the page. Removing the outline is only acceptable if you replace it with something equally visible — use :focus-visible so the ring appears for keyboard navigation but not on mouse clicks.

## Bad — do not do this

`interactions-rams-focus-outline-bad`

```tsx
export function RamsFocusOutlineBad() {
  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">Hidden Focus Indicators</h4>
        <div className="space-y-3">
          {/* BAD: outline-hidden with NO replacement focus indicator */}
          {/* Keyboard users cannot see what's focused */}
          <div className="flex gap-2 p-3 bg-muted rounded-lg">
            <button
              className="px-4 py-2 bg-primary text-primary-foreground rounded-md outline-hidden focus:outline-hidden"
              style={{ outline: 'none' }}
              // BAD: No focus-visible:ring-* replacement!
            >
              Button 1
            </button>
            <button
              className="px-4 py-2 border border-border rounded-md outline-hidden focus:outline-hidden"
              style={{ outline: 'none' }}
              // BAD: No focus-visible:ring-* replacement!
            >
              Button 2
            </button>
          </div>
          <input
            type="text"
            placeholder="Try tabbing here..."
            className="w-full px-3 py-2 border border-border rounded-md outline-hidden focus:outline-hidden"
            style={{ outline: 'none' }}
            // BAD: Input with no focus indicator - where's the cursor?
          />
          <div className="bg-muted rounded p-2 font-mono text-xs">
            <code className="text-error">{'outline: none; /* WCAG Failure */'}</code>
          </div>
          <p className="text-sm text-muted-foreground">
            Tab through elements - impossible to see focus location
          </p>
        </div>
      </div>
      <p className="text-xs text-error">
        Keyboard users cannot see which element is focused - WCAG 2.4.7 failure
      </p>
    </div>
  );
}
```

## Good — do this

`interactions-rams-focus-outline-good`

```tsx
export function RamsFocusOutlineGood() {
  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">Visible Focus Indicators</h4>
        <div className="space-y-3">
          <div className="flex gap-2 p-3 bg-muted rounded-lg">
            <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
              Button 1
            </button>
            <button className="px-4 py-2 border border-border rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
              Button 2
            </button>
          </div>
          <div className="bg-muted rounded p-2 font-mono text-xs">
            <code>focus-visible:ring-2 focus-visible:ring-ring</code>
          </div>
          <p className="text-sm text-muted-foreground">
            Press Tab to see focus rings appear
          </p>
        </div>
      </div>
      <p className="text-xs text-success">
        Clear visual indicator shows which element is focused
      </p>
    </div>
  );
}
```

## References

- [Rams review checklist](https://www.rams.ai/rams.md)
- [WCAG 2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html)